chart 报表相关配置

亦凉 2021-10-08 07:26 230阅读 0赞

### **图表数据** ###

创建图表的时候，需要把创建图表所需的所有数据放入一个数据对象中，然后向图表传递这个对象，这个数据对象可以包含下面这些参数

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>datasets</td> 
   <td>Array[object]</td> 
   <td>包含有一组数据的数据组。 查阅文档来确定有哪些可用参数是可添加到数据组中的。</td> 
  </tr> 
  <tr> 
   <td>labels</td> 
   <td>Array[string]</td> 
   <td>跟&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#scales-category-scale" rel="nofollow">category axis</a>&nbsp;一起使用的可选参数。</td> 
  </tr> 
  <tr> 
   <td>xLabels</td> 
   <td>Array[string]</td> 
   <td>横向坐标轴 类别</td> 
  </tr> 
  <tr> 
   <td>yLabels</td> 
   <td>Array[string]</td> 
   <td>纵向坐标轴 类别</td> 
  </tr> 
 </tbody> 
</table>

### **绘制带参数创建图表** ###

绘制一个带参数的图表，只需要向图表创建方法传递一个包含所需参数的对象即可。在下面这个例子中，设置了图表是不响应的。

var chartInstance = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: false
        }
    });

### **全局配置** ###

全局配置这个概念在 Chart.js 1.0 中已经介绍了，全局配置文件可以方便的改变所有的图表样式，或者个性化其中的某一个图表。

Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in `Chart.defaults.global`. The defaults for each chart type are discussed in the documentation for that chart type.

The following example would set the hover mode to ‘single’ for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.

Chart.defaults.global.hover.mode = 'single';
    
    // Hover mode is set to single because it was not overridden here
    var chartInstanceHoverModeSingle = new Chart(ctx, {
        type: 'line',
        data: data,
    });
    
    // This chart would have the hover mode that was passed in
    var chartInstanceDifferentHoverMode = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            hover: {
                // Overrides the global setting
                mode: 'label'
            }
        }
    })

**全局字体设置**

有4个可以改变全局图表字体样式的参数，这些参数在全局配置文件 `Chart.defaults.global` 中

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>defaultFontColor</td> 
   <td>Color</td> 
   <td>‘#666’</td> 
   <td>默认字体颜色</td> 
  </tr> 
  <tr> 
   <td>defaultFontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>默认字体</td> 
  </tr> 
  <tr> 
   <td>defaultFontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>默认字体大小（单位：px），Does not apply to radialLinear scale point labels</td> 
  </tr> 
  <tr> 
   <td>defaultFontStyle</td> 
   <td>String</td> 
   <td>‘normal’</td> 
   <td>默认字体样式。不会应用于提示弹窗的字体。不会应用于图表标题</td> 
  </tr> 
 </tbody> 
</table>

### **通用图表配置** ###

下面的设置选项适用于所有的图表， 你可以在全局配置文件中设置 [global configuration][]，也可以在构建图表的时候传递给构建方法。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>responsive</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>在图表容器canvas变化的时候自适应</td> 
  </tr> 
  <tr> 
   <td>responsiveAnimationDuration</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>图表自适应新尺寸所用时间</td> 
  </tr> 
  <tr> 
   <td>maintainAspectRatio</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>调整大小时保持横纵比</td> 
  </tr> 
  <tr> 
   <td>events</td> 
   <td>Array[String]</td> 
   <td>[“mousemove”,<br> ”mouseout”,&nbsp;<br> ”click”,<br> ”touchstart”,<br> ”touchmove”,<br> ”touchend”]</td> 
   <td>弹出提示小窗口要监听的事件</td> 
  </tr> 
  <tr> 
   <td>onClick</td> 
   <td>Function</td> 
   <td>null</td> 
   <td>Called if the event is of type ‘mouseup’ or ‘click’. Called in the context of the chart and passed an array of active elements</td> 
  </tr> 
  <tr> 
   <td>legendCallback</td> 
   <td>Function</td> 
   <td><code>function (chart) { }</code></td> 
   <td>Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.</td> 
  </tr> 
  <tr> 
   <td>onResize</td> 
   <td>Function</td> 
   <td>null</td> 
   <td>Called when a resize occurs. Gets passed two arguemnts: the chart instance and the new size.</td> 
  </tr> 
 </tbody> 
</table>

### **标题配置选项** ###

标题相关配置设置在 `options -> title` 域中，相关的全局配置在 `Chart.defaults.global.title`中。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示标题</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>‘top’</td> 
   <td>指定标题的位置。 可用参数有’top’, ‘left’, ‘bottom’ 和’right’</td> 
  </tr> 
  <tr> 
   <td>fullWidth</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>Marks that this box should take the full width of the canvas (pushing down other boxes)</td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>文字大小，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>文字字体，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontColor</td> 
   <td>Color</td> 
   <td>“#666”</td> 
   <td>文字颜色，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontStyle</td> 
   <td>String</td> 
   <td>‘bold’</td> 
   <td>文字样式，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>Number</td> 
   <td>10</td> 
   <td>在标题上下添加的间隔（单位为px）</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>”</td> 
   <td>标题内容</td> 
  </tr> 
 </tbody> 
</table>

**示例**

下面的例子会在创建图表的时候会包含标题“自定义图表标题”

var chartInstance = new Chart(ctx, {
        type: 'line',
        data: data, //data这里代表的是数值数组
        options: {
            title: {
                display: true,
                text: '自定义图表标题'
            }
        }
    })

### **图例** ###

图例相关的配置在`options -> legend` 域中，相关全局配置在`Chart.defaults.global.legend`中。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否显示图例</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>‘top’</td> 
   <td>图例位置。可用的位置有上下左右，’top’, ‘left’, ‘bottom’ and ‘right’.</td> 
  </tr> 
  <tr> 
   <td>fullWidth</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>Marks that this box should take the full width of the canvas (pushing down other boxes)</td> 
  </tr> 
  <tr> 
   <td>onClick</td> 
   <td>Function</td> 
   <td><code>function(event, legendItem) {}</code></td> 
   <td>A callback that is called when a click is registered on top of a label item</td> 
  </tr> 
  <tr> 
   <td>labels</td> 
   <td>Object</td> 
   <td>-</td> 
   <td>参阅下面的&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-legend-label-configuration" rel="nofollow">图例文字选项</a>.</td> 
  </tr> 
 </tbody> 
</table>

**图例文字选项**

图例文字选项写在图例选项下面的`options -> legend -> lables` 中。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>boxWidth</td> 
   <td>Number</td> 
   <td>40</td> 
   <td>Width of coloured box</td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>文字大小，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontStyle</td> 
   <td>String</td> 
   <td>“normal”</td> 
   <td>文字样式，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontColor</td> 
   <td>Color</td> 
   <td>“#666”</td> 
   <td>文字颜色，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>fontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>文字字体，默认继承全局配置中的设定值</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>Number</td> 
   <td>10</td> 
   <td>同行图例之间的 Padding</td> 
  </tr> 
  <tr> 
   <td>generateLabels:</td> 
   <td>Function</td> 
   <td><code>function(chart) { }</code></td> 
   <td>Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-legend-item-interface" rel="nofollow">Legend Item</a>for details.</td> 
  </tr> 
  <tr> 
   <td>usePointStyle</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).</td> 
  </tr> 
 </tbody> 
</table>

**图例接口**

Items passed to the legend `onClick` function are the ones returned from `labels.generateLabels`. These items must implement the following interface.

{
        // 文字
        text: String,
    
        // 图例方块颜色
        fillStyle: Color,
    
        // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
        hidden: Boolean,
    
        // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
        lineCap: String,
    
        // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
        lineDash: Array[Number],
    
        // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
        lineDashOffset: Number,
    
        // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
        lineJoin: String,
    
        // Width of box border
        lineWidth: Number,
    
        // Stroke style of the legend box
        strokeStyle: Color
    
        // Point style of the legend box (only used if usePointStyle is true)
        pointStyle: String
    }

**示例**

下面的例子将创建一个带图例的图表，图例文字颜色设置为红色。

var chartInstance = new Chart(ctx, {
        type: 'bar',
        data: data, //data 数据数组
        options: {
            legend: { //图例相关配置
                display: true,
                labels: { //图例文字
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        }
    });

### **提示弹窗 - 配置选项** ###

tooltip相关配置在 `options -> tooltips`中，相关的全局配置在 `Chart.defaults.global.tooltips`中。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>enabled</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否开启</td> 
  </tr> 
  <tr> 
   <td>custom</td> 
   <td>Function</td> 
   <td>null</td> 
   <td>参阅下面的&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-custom-tooltips" rel="nofollow">section</a>&nbsp;部分</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘single’</td> 
   <td>设置哪个元素要显示在提示弹窗中，可用的参数有&nbsp;<code>'single'</code>,&nbsp;<code>'label'</code>&nbsp;or<code>'x-axis'</code>.&nbsp;<br> &nbsp;<br><code>single</code>&nbsp;高亮最近的元素。&nbsp;<br> &nbsp;<br><code>label</code>&nbsp;高亮显示所有相同<code>X</code>&nbsp;数值的元素。&nbsp;<br> &nbsp;<br><code>'x-axis'</code>&nbsp;also highlights elements in all datasets at the same&nbsp;<code>X</code>&nbsp;value, but activates when hovering anywhere within the vertical slice of the x-axis representing that&nbsp;<code>X</code>&nbsp;value.</td> 
  </tr> 
  <tr> 
   <td>itemSort</td> 
   <td>Function</td> 
   <td>undefined</td> 
   <td>Allows sorting of&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-tooltip-item-interface" rel="nofollow">tooltip items</a>. Must implement a function that can be passed to&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" rel="nofollow">Array.prototype.sort</a></td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.8)’</td> 
   <td>背景颜色</td> 
  </tr> 
  <tr> 
   <td>titleFontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>标题文字字体，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>titleFontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>标题字体大小，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>titleFontStyle</td> 
   <td>String</td> 
   <td>“bold”</td> 
   <td>标题字体样式，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>titleFontColor</td> 
   <td>Color</td> 
   <td>“#fff”</td> 
   <td>标题字体颜色，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>titleSpacing</td> 
   <td>Number</td> 
   <td>2</td> 
   <td>标题上下的padding</td> 
  </tr> 
  <tr> 
   <td>titleMarginBottom</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>标题下方的margin</td> 
  </tr> 
  <tr> 
   <td>bodyFontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>内容字体，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>bodyFontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>内容字体大小，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>bodyFontStyle</td> 
   <td>String</td> 
   <td>“normal”</td> 
   <td>内容字体样式，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>bodyFontColor</td> 
   <td>Color</td> 
   <td>“#fff”</td> 
   <td>内容字体颜色，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>bodySpacing</td> 
   <td>Number</td> 
   <td>2</td> 
   <td>内容上下的padding</td> 
  </tr> 
  <tr> 
   <td>footerFontFamily</td> 
   <td>String</td> 
   <td>“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”</td> 
   <td>footer字体，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>footerFontSize</td> 
   <td>Number</td> 
   <td>12</td> 
   <td>footer字体大小，默认继承全局配置中的设置</td> 
  </tr> 
  <tr> 
   <td>footerFontStyle</td> 
   <td>String</td> 
   <td>“bold”</td> 
   <td>footer字体样式</td> 
  </tr> 
  <tr> 
   <td>footerFontColor</td> 
   <td>Color</td> 
   <td>“#fff”</td> 
   <td>footer字体颜色</td> 
  </tr> 
  <tr> 
   <td>footerSpacing</td> 
   <td>Number</td> 
   <td>2</td> 
   <td>footer上下的padding</td> 
  </tr> 
  <tr> 
   <td>footerMarginTop</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>footer上面的margin</td> 
  </tr> 
  <tr> 
   <td>xPadding</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>左右的padding</td> 
  </tr> 
  <tr> 
   <td>yPadding</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>上下的padding</td> 
  </tr> 
  <tr> 
   <td>caretSize</td> 
   <td>Number</td> 
   <td>5</td> 
   <td>对话框引出箭头大小，单位px</td> 
  </tr> 
  <tr> 
   <td>cornerRadius</td> 
   <td>Number</td> 
   <td>6</td> 
   <td>圆角大小</td> 
  </tr> 
  <tr> 
   <td>multiKeyBackground</td> 
   <td>Color</td> 
   <td>“#fff”</td> 
   <td>Color to draw behind the colored boxes when multiple items are in the tooltip</td> 
  </tr> 
  <tr> 
   <td>callbacks</td> 
   <td>Object</td> 
   <td>&nbsp;</td> 
   <td>See the&nbsp;<a href="https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-tooltip-callbacks" rel="nofollow">callbacks section</a>&nbsp;below</td> 
  </tr> 
 </tbody> 
</table>

**Tooltip 回调**

The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, ‘this’ will be the tooltip object created from the Chart.Tooltip constructor.

All functions are called with the same arguments: a [tooltip item][] and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

<table> 
 <thead> 
  <tr> 
   <th>Callback</th> 
   <th>Arguments</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeTitle</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render before the title</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render as the title</td> 
  </tr> 
  <tr> 
   <td>afterTitle</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render after the title</td> 
  </tr> 
  <tr> 
   <td>beforeBody</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render before the body section</td> 
  </tr> 
  <tr> 
   <td>beforeLabel</td> 
   <td><code>tooltipItem, data</code></td> 
   <td>Text to render before an individual label</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td><code>tooltipItem, data</code></td> 
   <td>Text to render for an individual item in the tooltip</td> 
  </tr> 
  <tr> 
   <td>labelColor</td> 
   <td><code>tooltipItem, chartInstace</code></td> 
   <td>Returns the colors to render for the tooltip item. Return as an object containing two parameters:&nbsp;<code>borderColor</code>&nbsp;and&nbsp;<code>backgroundColor</code>.</td> 
  </tr> 
  <tr> 
   <td>afterLabel</td> 
   <td><code>tooltipItem, data</code></td> 
   <td>Text to render after an individual label</td> 
  </tr> 
  <tr> 
   <td>afterBody</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render after the body section</td> 
  </tr> 
  <tr> 
   <td>beforeFooter</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render before the footer section</td> 
  </tr> 
  <tr> 
   <td>footer</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render as the footer</td> 
  </tr> 
  <tr> 
   <td>afterFooter</td> 
   <td><code>Array[tooltipItem], data</code></td> 
   <td>Text to render after the footer section</td> 
  </tr> 
 </tbody> 
</table>

**Tooltip Item Interface**

The tooltip items passed to the tooltip callbacks implement the following interface.

{
        // X Value of the tooltip as a string
        xLabel: String,
    
        // Y value of the tooltip as a string
        yLabel: String,
    
        // Index of the dataset the item comes from
        datasetIndex: Number,
    
        // Index of this data item in the dataset
        index: Number
    }

### **悬停 - 配置选项** ###

The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘single’</td> 
   <td>Sets which elements hover. Acceptable options are&nbsp;<code>'single'</code>,&nbsp;<code>'label'</code>,&nbsp;<code>'x-axis'</code>, or<code>'dataset'</code>.&nbsp;<br> &nbsp;<br><code>single</code>&nbsp;highlights the closest element.&nbsp;<br> &nbsp;<br><code>label</code>&nbsp;highlights elements in all datasets at the same&nbsp;<code>X</code>&nbsp;value.&nbsp;<br> &nbsp;<br><code>'x-axis'</code>&nbsp;also highlights elements in all datasets at the same&nbsp;<code>X</code>&nbsp;value, but activates when hovering anywhere within the vertical slice of the x-axis representing that&nbsp;<code>X</code>&nbsp;value.&nbsp;<br> &nbsp;<br><code>dataset</code>&nbsp;highlights the closest dataset.</td> 
  </tr> 
  <tr> 
   <td>animationDuration</td> 
   <td>Number</td> 
   <td>400</td> 
   <td>Duration in milliseconds it takes to animate hover style changes</td> 
  </tr> 
  <tr> 
   <td>onHover</td> 
   <td>Function</td> 
   <td>null</td> 
   <td>Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)</td> 
  </tr> 
 </tbody> 
</table>

### **动画 - 配置选项** ###

The following animation options are available. The global options for are defined in `Chart.defaults.global.animation`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>duration</td> 
   <td>Number</td> 
   <td>1000</td> 
   <td>The number of milliseconds an animation takes.</td> 
  </tr> 
  <tr> 
   <td>easing</td> 
   <td>String</td> 
   <td>“easeOutQuart”</td> 
   <td>Easing function to use.</td> 
  </tr> 
  <tr> 
   <td>onProgress</td> 
   <td>Function</td> 
   <td>none</td> 
   <td>Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation.</td> 
  </tr> 
  <tr> 
   <td>onComplete</td> 
   <td>Function</td> 
   <td>none</td> 
   <td>Callback called at the end of an animation. Passed the same arguments as&nbsp;<code>onProgress</code></td> 
  </tr> 
 </tbody> 
</table>

**动画回调**

The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed an object that implements the following interface. An example usage of these callbacks can be found on[Github][]. This sample displays a progress bar showing how far along the animation is.

{
        // Chart object
        chartInstance,
    
        // Contains details of the on-going animation
        animationObject,
    }

**Animation Object**

The animation object passed to the callbacks is of type `Chart.Animation`. The object has the following parameters.

{
        // Current Animation frame number
        currentStep: Number,
    
        // Number of animation frames
        numSteps: Number,
    
        // Animation easing to use
        easing: String,
    
        // Function that renders the chart
        render: Function,
    
        // User callback
        onAnimationProgress: Function,
    
        // User callback
        onAnimationComplete: Function
    }

### **Element Configuration** ###

The global options for elements are defined in `Chart.defaults.global.elements`.

Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

**Arc Configuration**

Arcs are used in the polar area, doughnut and pie charts. They can be configured with the following options. The global arc options are stored in `Chart.defaults.global.elements.arc`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default fill color for arcs. Inherited from the global default</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>Color</td> 
   <td>‘#fff’</td> 
   <td>Default stroke color for arcs</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>Number</td> 
   <td>2</td> 
   <td>Default stroke width for arcs</td> 
  </tr> 
 </tbody> 
</table>

**曲线图表选项**

Line elements are used to represent the line in a line chart. The global line options are stored in `Chart.defaults.global.elements.line`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tension</td> 
   <td>Number</td> 
   <td>0.4</td> 
   <td>Default bezier curve tension. Set to&nbsp;<code>0</code>&nbsp;for no bezier curves.</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default line fill color</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>Number</td> 
   <td>3</td> 
   <td>Default line stroke width</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default line stroke color</td> 
  </tr> 
  <tr> 
   <td>borderCapStyle</td> 
   <td>String</td> 
   <td>‘butt’</td> 
   <td>Default line cap style. See&nbsp;<a href="https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap" rel="nofollow">MDN</a></td> 
  </tr> 
  <tr> 
   <td>borderDash</td> 
   <td>Array</td> 
   <td><code>[]</code></td> 
   <td>Default line dash. See&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash" rel="nofollow">MDN</a></td> 
  </tr> 
  <tr> 
   <td>borderDashOffset</td> 
   <td>Number</td> 
   <td>0.0</td> 
   <td>Default line dash offset. See&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" rel="nofollow">MDN</a></td> 
  </tr> 
  <tr> 
   <td>borderJoinStyle</td> 
   <td>String</td> 
   <td>‘miter’</td> 
   <td>Default line join style. See&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin" rel="nofollow">MDN</a></td> 
  </tr> 
  <tr> 
   <td>capBezierPoints</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>If true, bezier control points are kept inside the chart. If false, no restriction is enforced.</td> 
  </tr> 
  <tr> 
   <td>fill</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>If true, the line is filled.</td> 
  </tr> 
  <tr> 
   <td>stepped</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>If true, the line is shown as a stepped line and ‘tension’ will be ignored</td> 
  </tr> 
 </tbody> 
</table>

**Point Configuration**

Point elements are used to represent the points in a line chart or a bubble chart. The global point options are stored in `Chart.defaults.global.elements.point`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>radius</td> 
   <td>Number</td> 
   <td>3</td> 
   <td>Default point radius</td> 
  </tr> 
  <tr> 
   <td>pointStyle</td> 
   <td>String</td> 
   <td>‘circle’</td> 
   <td>Default point style</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default point fill color</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>Default point stroke width</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default point stroke color</td> 
  </tr> 
  <tr> 
   <td>hitRadius</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>Extra radius added to point radius for hit detection</td> 
  </tr> 
  <tr> 
   <td>hoverRadius</td> 
   <td>Number</td> 
   <td>4</td> 
   <td>Default point radius when hovered</td> 
  </tr> 
  <tr> 
   <td>hoverBorderWidth</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>Default stroke width when hovered</td> 
  </tr> 
 </tbody> 
</table>

**Rectangle Configuration**

Rectangle elements are used to represent the bars in a bar chart. The global rectangle options are stored in `Chart.defaults.global.elements.rectangle`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default bar fill color</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>Default bar stroke width</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>Color</td> 
   <td>‘rgba(0,0,0,0.1)’</td> 
   <td>Default bar stroke color</td> 
  </tr> 
  <tr> 
   <td>borderSkipped</td> 
   <td>String</td> 
   <td>‘bottom’</td> 
   <td>Default skipped (excluded) border for rectangle. Can be one of&nbsp;<code>bottom</code>,&nbsp;<code>left</code>,&nbsp;<code>top</code>,&nbsp;<code>right</code></td> 
  </tr> 
 </tbody> 
</table>

### **颜色** ###

When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to ‘rgba(0, 0, 0, 0.1)’;

You can also pass a [CanvasGradient][] object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.

The final option is to pass a [CanvasPattern][] object. For example, if you wanted to fill a dataset with a pattern from an image you could do the following.

[global configuration]: https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-global-configuration
[tooltip item]: https://blog.csdn.net/kimbing/article/details/53078934#chart-configuration-tooltip-item-interface
[Github]: https://github.com/chartjs/Chart.js/blob/master/samples/AnimationCallbacks/progress-bar.html
[CanvasGradient]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient
[CanvasPattern]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern