集成

Chart.js可以与JavaScript集成或与不同的模块加载器集成。 下面的例子显示了如何在不同的方式中加载Chart.js。

ES6 Modules

import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

Script 标签

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

Common JS

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

Require JS

require(['path/to/chartjs/dist/Chart.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

入门

首先，需要在页面中创建一个canvas

<canvas id="myChart"></canvas>

然后需要在页面中引用Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

现在我们就可以创建一个图表了，在页面中添加以下脚本：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // 要创建的图表类型
    type: 'line',

    // 数据集
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // 配置选项
    options: {}
});

创建一个图表

Chart.js很容易上手，只需要在页面中引用脚本文件，并创建<canvas>节点即可渲染出图表。

下面的例子创建了一个单数据集的Bar图表。完整的文档可查看使用文档

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

响应式图表

当根据窗口大小更改图表大小时，主要的限制是画布渲染大小（canvas.width和.height）不能用相对值表示，与显示大小相反（canvas.style.width和.height）。此外，这些尺寸彼此独立，因此画布渲染尺寸不会根据显示尺寸自动调整，从而使渲染不准确。

以下示例不起作用：

• <canvas height="40vh" width="80vw">: 无效值，画布不调整大小 (示例)
• <canvas style="height:40vh; width:80vw">: 无效的行为，画布调整大小但变得模糊(example)

Chart.js提供了几个选项，通过检测画布显示大小何时更改并相应地更新渲染大小来启用响应并控制图表的大小调整行为。

配置选项

名称	类型	默认值	描述
responsive	Boolean	true	调整图表画布的容器大小 (重要提示).
responsiveAnimationDuration	Number	0	调整大小后执行动画时间（以毫秒为单位））
maintainAspectRatio	Boolean	true	保持原有的宽高比
onResize	Function	null	调整大小时调用,获取传递两个参数：图表实例和新大小

重要提示

不能直接从CANVAS元素检测画布尺寸何时改变。Chart.js使用其父容器来更新canvas渲染和显示大小。然而，该方法要求容器相对定位。强烈建议将此容器专用于图表canvas,然后可以通过设置容器大小的相对值来实现响应：例子

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

也可以通过修改容器大小来改变图表大小：

chart.canvas.parentNode.style.height = '128px';

打印可调整大小的图表

打印页面时，允许CSS媒体查询更改样式。从这些媒体查询中应用的CSS可能会导致图表需要调整大小。但是，调整大小不会自动发生。 要在打印时支持调整图表大小，您需要使用onbeforeprint事件钩子并手动触发每个图表的大小调整。

function beforePrintHandler () {
  for (var id in Chart.instances) {
    Chart.instances[id].resize()
  }
}

交互

hover配置通过options.hover改变。全局hover配置位于Chart.defaults.global.hover。要配置哪些事件触发图表交互，请参阅事件。

名称	类型	默认值	描述
mode	String	'nearest'	设置工具提示中出现的元素。有关详细信息，请参考交互模式。
intersect	Boolean	true	如果为true，则hover仅适用于鼠标位置的图表进行相交。
axis	String	'x'	可以设置为'x'，'y'或'xy'来定义计算距离时使用的方向。 index模式默认为'x'，dataset和nearest模式默认为'xy'。
animationDuration	Number	400	hover动画时间（毫秒单位））

事件

以下属性定义图表如何事件交互。

名称	类别	默认值	描述
events	String[]	["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]	监听图表的悬停和工具提示 更多...
onHover	Function	null	当任何事件触发时调用。 在图表的上下文中调用，并传递事件和一系列活动元素（bars，points等）。
onClick	Function	null	如果事件的类型为“mouseup”或“click”，则调用该函数。 在图表的上下文中调用，并传递事件和一系列活动元素。

事件选项

例如，要让图表只响应点击事件，你可以这样做：

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        // 图表不会响应除click之外的事件
        events: ['click']
    }
});

交互模式

通过配置与图形悬停或工具提示的交互时，可以使用多种不同的模式。

这些模式将在下面详细说明，以及它们与交点设置的结合方式。

交叉点

显示交叉点上的数据

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point'
        }
    }
})

nearest

获取最接近点的项目。最近的项目是根据与图表项目中心的距离（point, bar）确定的。如果2个以上的条目距离相同，则使用最小面积的条目。 如果intersect为true，则仅当鼠标位置与图形中的项目相交时触发。这对于组合图非常有用，其中点隐藏在bars后面。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest'
        }
    }
})

single (已废弃)

Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.

label (已废弃)

参考 'index'

索引

查找相同索引项。如果intersect为true，则第一个相交项用于确定数据中的索引。如果 intersect为false，则使用最近的项来确定索引。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'index'
        }
    }
})

要在图表中使用索引模式（如水平条形图，沿着y方向搜索），可以使用v2.7.0中引入的axis设置。 通过将这个值设置为y方向上的'y'被使用。

var chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        tooltips: {
            mode: 'index',
            axis: 'y'
        }
    }
})

x轴 (已废弃)

类似设置intersect = false的'index'模式

数据集

查找相同索引项。如果intersect为true，则第一个相交项用于确定数据中的索引。如果 intersect为false，则使用最近的项来确定索引。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'dataset'
        }
    }
})

x

返回基于X坐标相交的所有项目。对于垂直游标实现将是有用的。仅适用于笛卡尔图表。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

y

返回基于Y坐标相交的所有项目。这对于水平光标实现将是有用的。仅适用于笛卡尔图表。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'y'
        }
    }
})

颜色

当向Chart选项提供颜色时，可以使用多种格式。 您可以将颜色指定为十六进制、RGB或HSL。 如果未指定颜色，Chart.js将使用全局默认颜色。 此颜色存储在Chart.defaults.global.defaultColor中。 初始值为rgba（0，0，0，0.1）。

您也可以传递CanvasGradient对象。 在传递到图表之前，你需要先创建它以实现一些有趣的效果。

图案和渐变
一个替代选项是传递CanvasPattern或CanvasGradient对象，而不是字符串颜色。

例如，如果要填充图案的数据集，则可以执行以下操作:

var img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

​
​ var chart = new Chart(ctx, {
​ data: {
​ labels: ['Item 1', 'Item 2', 'Item 3'],
​ datasets: [{
​ data: [10, 20, 30],
​ backgroundColor: fillPattern
​ }]
​ }
​ })
}
使用图形填充数据可以帮助具有视力缺陷（例如色盲或局部视觉）的观众更容易地了解您的数据。

使用Patternomaly库可以生成填充数据集的模式。

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

字体

共有4个特殊的全局设置更改图表上的字体。这些选项在Chart.defaults.global中。全局字体设置仅适用于配置中不包含更多特定选项的情况。

例如，在这个图表中，除了图例中的标签外，文本都是红色的。

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // 这个更具体的字体属性覆盖全局属性
                fontColor: 'black'
            }
        }
    }
});

名称	类型	默认值	描述
defaultFontColor	Color	'#666'	默认字体颜色
defaultFontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	默认字体集
defaultFontSize	Number	12	文本的默认字体大小（以px为单位）。不适用于径向线性刻度标签。
defaultFontStyle	String	'normal'	默认字体样式。不适用于工具提示标题或页脚。不适用于图表标题。

不存在的字体

如果为系统上存在的图表指定了字体，则浏览器在设置时不会应用该字体。 如果您发现图表中出现奇怪的字体，请检查您正在应用的字体是否存在于您的系统中。 有关更多详细信息，请参见[issue 3318](https://chartjs.bootcss.com/docs/general/(https:/github.com/chartjs/Chart.js/issues/3318)。

动画

Chart.js开箱即用动画图表。提供了许多选项来配置动画的外观以及动画时间。

动画配置

以下为全局选项，在Chart.defaults.global.animation中定义。

名称	类型	默认值	描述
duration	Number	1000	动画所需的毫秒数
easing	String	'easeOutQuart'	Easing 更多...
onProgress	Function	null	每一步动画的回调 更多...
onComplete	Function	null	动画结束后回调 更多...

Easing

可用选项:

• 'linear'
• 'easeInQuad'
• 'easeOutQuad'
• 'easeInOutQuad'
• 'easeInCubic'
• 'easeOutCubic'
• 'easeInOutCubic'
• 'easeInQuart'
• 'easeOutQuart'
• 'easeInOutQuart'
• 'easeInQuint'
• 'easeOutQuint'
• 'easeInOutQuint'
• 'easeInSine'
• 'easeOutSine'
• 'easeInOutSine'
• 'easeInExpo'
• 'easeOutExpo'
• 'easeInOutExpo'
• 'easeInCirc'
• 'easeOutCirc'
• 'easeInOutCirc'
• 'easeInElastic'
• 'easeOutElastic'
• 'easeInOutElastic'
• 'easeInBack'
• 'easeOutBack'
• 'easeInOutBack'
• 'easeInBounce'
• 'easeOutBounce'
• 'easeInOutBounce'

参考 Robert Penner's easing equations.

动画回调

onProgress和onComplete回调对于外部操作同步到图表动画，回调传递一个Chart.Animation实例：

{
    // Chart 对象
    chart: Chart,

    // 当前动画帧数
    currentStep: Number,

    // 动画帧数
    numSteps: Number,

    // easing动画使用
    easing: String,

    // 绘制图表
    render: Function,

    // 使用回调
    onAnimationProgress: Function,

    // 使用回调
    onAnimationComplete: Function
}

以下示例在图表动画期间填充进度条。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
            }
        }
    }
});

这些回调的另一个例子可以在Github上找到：该示例显示一个进度条，显示动画的距离。

布局配置

布局配置被传递到options.layout命名空间。图表布局的全局选项在Chart.defaults.global.layout中定义。

名称	类型	默认值	描述
padding	Number or Object	0	内间距. 更多...

内间距

如果该值是一个数字，它将应用于图表的所有方面（左，上，右，下）。如果这个值是一个对象，left属性定义了左边的间距。类似地，也可以指定right，top和bottom属性。

假设你想在图表画布的左侧添加50px的间距，你可以这样做：

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});

图例配置

显示图表上出现的区域数据集的图例。

配置选项

图例配置在 options.legend 中.全局配置在 Chart.defaults.global.legend。

名称	类型	默认值	描述
display	Boolean	true	是否显示
position	String	'top'	位置 更多...
fullWidth	Boolean	true	是否铺满画布，此配置不常改变
onClick	Function		标签项的回调事件
onHover	Function		'mousemove' 事件注册在标签项上时的回调
reverse	Boolean	false	以相反的顺序显示数据集
labels	Object		参阅下面的图例标签配置部分

位置

图例的位置选项：

• 'top'
• 'left'
• 'bottom'
• 'right'

图例标签配置

图例标签配置使用label关键字。

名称	类型	默认值	描述
boxWidth	Number	40	宽度
fontSize	Number	12	字体大小
fontStyle	String	'normal'	字体样式
fontColor	Color	'#666'	字体颜色
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	字体集
padding	Number	10	每个图例之间的间距
generateLabels	Function		为图例中的每个事物生成图例项目。默认实现返回颜色框的文本+样式。有关详细信息，请参阅图例项目。
filter	Function	null	从图例中过滤图例。接收 2 个参数，图例项目和图表数据。
usePointStyle	Boolean	false	标签样式将匹配相应的点样式（大小基于 fontSize，boxWidth 不在这种情况下使用）。

图例项目接口

传递给图例onClick函数的项目是从labels.generateLabels返回的项目。这些项目必须实现以下接口。

{
    // 要显示的标签
    text: String,

    // 填充图例框的样式
    fillStyle: Color,

    // 如果为true，则表示隐藏的数据集。标签将以透视效果呈现。
    hidden: Boolean,

    // 边框 参考 https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: String,

    // 边框 参考 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],

    // 边框 参考  https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,

    // 边框 参考 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,

    // 边框宽度
    lineWidth: Number,

    // 图例框的描边样式
    strokeStyle: Color

    // 图例框的点样式（仅当usePointStyle为true时才使用）
    pointStyle: String
}

示例

以下示例将创建一个启用了legend的图表，并将所有文本的颜色变为红色。

var chart = new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: "rgb(255, 99, 132)"
            }
        }
    }
});

自定义点击操作

点击legend中的项目触发不同的行为，可以通过在配置对象中使用回调来轻松实现。

默认操作为：

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    ci.update();
}

假设我们希望链接前两个数据集的显示。我们可以相应地更改click handler。

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function(e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // Do the original logic
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [ci.getDatasetMeta(0), ci.getDatasetMeta(1)].forEach(function(meta) {
            meta.hidden =
                meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        legend: {}
    }
});

此时当你单击此图表中的legend时，前两个数据集的可见性将会链接在一起。

HTML Legends

有时你需要一个非常复杂的legend，在这种情况下有必要使用HTML legend。 图表在其原型上提供了一个generateLegend（）方法，该方法返回legend的HTML字符串。

要配置如何生成此legend，可以更改legendCallback配置属性。

var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        legendCallback: function(chart) {
            // Return the HTML string here.
        }
    }
});

请注意，legendCallback不会自动调用，你必须在使用此方法创建legend时自己在代码中调用generateLegend（）。

标题

图表标题定义要在图表顶部绘制的文本。

标题配置

标题在options.title中配置。图表标题的全局选项在Chart.defaults.global.title中定义。

名称	类型	默认值	描述
display	Boolean	false	是否显示标题
position	String	'top'	标题未知更多...
fontSize	Number	12	字体大小
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	字体集
fontColor	Color	'#666'	字体颜色
fontStyle	String	'bold'	字体样式
padding	Number	10	标题文本上下方间距
lineHeight	Number/String	1.2	单行文本的高度 (参见 MDN)
text	String/String[]	''	标题文字

位置

可用的标题位置为:

• 'top'
• 'left'
• 'bottom'
• 'right'

示例代码

以下示例将在创建的图表上加上“Custom Chart Title”的标题。

var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        title: {
            display: true,
            text: "Custom Chart Title"
        }
    }
});

通用元素配置

虽然图表类型提供了设置来配置每个数据集的样式，但我们有时希望以相同的方式对所有数据集进行样式设置。常用的做法是用相同的颜色对 条形图中的所有线条进行描边来改变每个数据集的填充。

我们可以为四种不同类型的元素配置选项：arc, lines, points, 和 rectangles。当设置后，这些选项将应用于该类型的所有对象，除非被附加到数据集的配置被覆盖掉。

全局配置

元素选项可以在每个图表或全局中指定。元素的全局选项在Chart.defaults.global.elements中定义。例如，要设置全局条形图的边框宽度，可以执行以下操作：

Chart.defaults.global.elements.rectangle.borderWidth = 2;

点指示器配置

点元素用于表示折线图或气泡图中的点。

全局点指示器配置选项: Chart.defaults.global.elements.point

名称	类型	默认值	描述
radius	Number	3	半径
tyle	String	circle	样式
backgroundColor	Color	'rgba(0,0,0,0.1)'	填充色
borderWidth	Number	1	边框宽度
borderColor	Color	'rgba(0,0,0,0.1)'	边框颜色
hitRadius	Number	1	点击时额外增加的点半径
hoverRadius	Number	4	悬浮时的点半径
hoverBorderWidth	Number	1	悬浮时的边框宽度

数据点样式

支持以下值：

• 'circle'
• 'cross'
• 'crossRot'
• 'dash'
• 'line'
• 'rect'
• 'rectRounded'
• 'rectRot'
• 'star'
• 'triangle'

如果值是图像，则使用drawImage在canvas上绘制该图像。

折线配置

线元素用于表示折线图中的线。

全局折线配置: Chart.defaults.global.elements.line

名称	类型	默认值	描述
tension	Number	0.4	贝塞尔曲线张力 (0 表示没有)
backgroundColor	Color	'rgba(0,0,0,0.1)'	填充色
borderWidth	Number	3	画笔宽度
borderColor	Color	'rgba(0,0,0,0.1)'	画笔颜色
borderCapStyle	String	'butt'	线帽样式 (详看 MDN).
borderDash	Array	[]	线段 (详看 MDN).
borderDashOffset	Number	0	偏移量 (详看 MDN).
borderJoinStyle	String	'miter'	连接样式 (详看 MDN).
capBezierPoints	Boolean	true	true 表示在图表内受贝塞尔曲线控制，false为没限制
fill	Boolean/String	true	填充位置: 'zero', 'top', 'bottom', true (等于'zero') 或者 false (不填充).
stepped	Boolean	false	true 将线显示为阶梯线(tension设置将会被忽略).

条形配置

矩形元素用于表示条形图中的条形。

全局矩形设置: Chart.defaults.global.elements.rectangle

名称	类型	默认值	描述
backgroundColor	Color	'rgba(0,0,0,0.1)'	填充色
borderWidth	Number	0	边框宽度
borderColor	Color	'rgba(0,0,0,0.1)'	边框色.
borderSkipped	String	'bottom'	跳过 (排除) 的边框: 'bottom', 'left', 'top' or 'right'.

弧配置

圆弧用于极地图，甜甜圈图和饼图。

全局圆弧配置: Chart.defaults.global.elements.arc.

名称	类型	默认值	描述
backgroundColor	Color	'rgba(0,0,0,0.1)'	填充色
borderColor	Color	'#fff'	描边框色
borderWidth	Number	2	描边宽度

折线图(Line)

折线图是在一条线上绘制数据点的展现方式。通常用于显示趋势数据或两个数据集的比较。

示例用法

var myLineChart = new Chart(ctx, {
    type: "line",
    data: data,
    options: options
});

数据集属性

折线图允许为每个数据集指定多个属性以显示特定数据集。所有 point *属性都可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个点，第二个值应用于第二个点，依此类推。

名称	类型	描述
label	String	在图例和工具提示中显示的数据集的标签。
xAxisID	String	绘制此数据集的 x 轴的 ID。如果未指定，则默认为第一个找到的 x 轴的 ID。
yAxisID	String	绘制该数据集的 y 轴的 ID。如果未指定，则默认为第一个找到的 y 轴的 ID。
backgroundColor	Color/Color[]	线条背景色 参考 颜色(Colors)
borderColor	Color/Color[]	线条颜色 参考 颜色(Colors)
borderWidth	Number/Number[]	线的宽度(以像素为单位)
borderDash	Number[]	破折号的长度和间距。 参考 MDN
borderDashOffset	Number	偏移量 参考 MDN
borderCapStyle	String	线帽样式 参考 MDN
borderJoinStyle	String	线连接风格 参考 MDN
cubicInterpolationMode	String	离散的点之间的连接方式 更多...
fill	Boolean/String	折线区域的填充方式 更多...
lineTension	Number	贝塞尔曲线张力。设置为 0 绘制直线。如果使用单调立方插值，则忽略此选项。
pointBackgroundColor	Color/Color[]	点的填充色
pointBorderColor	Color/Color[]	点的边框色
pointBorderWidth	Number/Number[]	点边框宽度(以像素为单位)
pointRadius	Number/Number[]	点的半径。如果设置为 0，则不显示。
pointStyle	String/String[]/Image/Image[]	数据点的样式 更多...
pointHitRadius	Number/Number[]	对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColor	Color/Color[]	鼠标悬浮时点背景颜色。
pointHoverBorderColor	Color/Color[]	鼠标悬浮时点的边框色
pointHoverBorderWidth	Number/Number[]	鼠标悬浮时点的边框宽度
pointHoverRadius	Number/Number[]	鼠标悬浮时点的半径大小
showLine	Boolean	如果设置 false，则不会为此数据集绘制线条。
spanGaps	Boolean	如果为 true，则会在没有或为空数据的点之间绘制线条。如果为 false，则带有 NaN 数据的点会产生一个中断
steppedLine	Boolean/String	是否显示为阶梯线 更多...

cubicInterpolationMode

支持以下插值模式：

• 'default'
• 'monotone'.

“default”使用自定义加权立方插值，为所有类型的数据集生成曲线。

“monotone”更适合于y = f（x）数据集：它保留被插值数据集的单调性（或分段单调性），并确保局部极值（如果有的话）停留在输入数据点。

如果保持不变（undefined），则使用全局·options.elements.line.cubicInterpolationMode属性。

Stepped Line

stepsLine支持以下值:

• false: 不设置 (默认)
• true: 数值之前绘制线条 (等于. 'before')
• 'before': 之前
• 'after': 之后

参考实例 如果设置stepsLine值为 false 以外的任何值，lineTension将被忽略。

配置选项

折线图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并，形成最终传递给图表的选项。

名称	类型	默认值	描述
showLines	Boolean	true	如果为 false，则在数据点之间不显示线条
spanGaps	Boolean	false	如果为 false, NaN 数据会在折线中间显示一个间断

默认选项

通常要将配置设置应用于所有创建的折线图。全局折线图设置存储在Chart.defaults.line中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

例如，要使用spanGaps = true配置所有折线图，应该这样：

Chart.defaults.line.spanGaps = true;

数据结构

线形图数据集的data属性可以使用两种方式。

Number[]

data: [20, 10];

当数据是数字数组时，x 轴通常是一个[category](https://chartjs.bootcss.com/docs/axes/cartesian/category.html#Category Axis)。数据点则按照在数组中的索引，依次显示在图表上。使用 category 轴创建折线图时，必须指定数据对象的labels属性。

Point[]

data: [
    {
        x: 10,
        y: 20
    },
    {
        x: 15,
        y: 10
    }
];

此项用于稀疏数据集，例如散点图(scatter charts)中的数据集。每个数据点都使用包含x和 y 属性的对象来指定。

堆积面积图

通过更改 y 轴上的设置以启用堆叠，折线图可以配置为堆积面积图。堆积面积图可以用来显示一个数据趋势是如何由多个小块组成的。

var stackedLine = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        scales: {
            yAxes: [
                {
                    stacked: true
                }
            ]
        }
    }
});

高性能折线图

绘制大量数据时，图表渲染时间可能会开始变得相当长。在这种情况下，可以使用以下策略来提高性能。

数据抽取

抽取有意义的数据来实现最佳效果。当图表上显示大量数据时，在仅有几百像素宽的图表上显示数以万计的数据点是没有意义的。

数据抽取有许多方法，算法的选择取决于你的数据和你想要达到的结果。例如，最小/最大抽取将保留数据中的峰值，但每个像素最多可能需要 4 个点。这种类型的抽取对于在非常嘈杂的数据中查看峰值数据很有效。

禁用贝塞尔曲线

在图表上绘制直线比贝塞尔曲线更高效，因此禁用贝塞尔曲线将提高渲染时间。

要为整个图表禁用贝塞尔曲线，执行以下操作：

new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        elements: {
            line: {
                tension: 0 // 禁用贝塞尔曲线
            }
        }
    }
});

不渲染线条

如果有很多数据点，那么可以禁用线条的的渲染并仅绘制点。这样做意味着在画布上绘画将会减少更多渲染，从而提高性能。

要禁用线条渲染，可执行以下操作:

new Chart(ctx, {
    type: "line",
    data: {
        datasets: [
            {
                showLine: false // 为单个数据集禁用
            }
        ]
    },
    options: {
        showLines: false // 为所有的数据集禁用
    }
});

禁用动画

如果你的图表渲染需要很长时间，那么禁用动画是一个好办法。这样做意味着图表只需要在更新期间渲染而不是多次渲染。这将减少 CPU 使用率并改善一般页面的性能。

To disable animations

new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        animation: {
            duration: 0 // 一般动画时间
        },
        hover: {
            animationDuration: 0 // 悬停项目时动画的持续时间
        },
        responsiveAnimationDuration: 0 // 调整大小后的动画持续时间
    }
});

柱状/条形图(Bar)

柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。

示例用法

var myBarChart = new Chart(ctx, {
    type: "bar",
    data: data,
    options: options
});

数据集属性

柱状/条形图允许为每个数据集指定一些属性用于显示特定数据集。一些属性可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个节点，第二个值应用于第二个节点，依此类推。

名称	类型	描述
label	String	在图例和工具提示中显示的数据集标签
xAxisID	String	绘制此数据集的 x 轴的 ID。如果未指定，则默认为第一个找到的 x 轴的 ID 。
yAxisID	String	绘制该数据集的 y 轴的 ID。如果未指定，则默认为第一个找到的 y 轴的 ID。
backgroundColor	Color/Color[]	柱状/条形图填充色. 参考 颜色(Colors)
borderColor	Color/Color[]	边框色 参考 颜色(Colors)
borderWidth	Number/Number[]	边框宽度(以像素为单位)
borderSkipped	String	不绘制边框 更多...
hoverBackgroundColor	Color/Color[]	悬浮时的填充色
hoverBorderColor	Color/Color[]	悬浮时的边框色
hoverBorderWidth	Number/Number[]	悬浮时边框宽度

borderSkipped

此设置用于避免基线被填充。一般来说，除非创建从柱状/条形图派生的图表类型，否则不需要更改。

选项:

• 'bottom'
• 'left'
• 'top'
• 'right'

配置选项

柱状/条形图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并，形成最终传递给图表的选项。

名称	类型	默认值	描述
barPercentage	Number	0.9	在 category 百分比内，每条 bar 的百分比(0-1)。如果设置为 1，则将使用 category 的整个宽度 更多...
categoryPercentage	Number	0.8	每个数据点可用宽度的百分比更多...
barThickness	Number		手动设置每个 bar 的宽度像素。如果未设置，则使用 barPercentage 和 categoryPercentage 自动调整大小;
maxBarThickness	Number		设置该选项确保自动调整尺寸的 bar 的大小。仅当barThickness未设置时才能使用（自动调整大小已启用）。
gridLines.offsetGridLines	Boolean	true	如果为 true，则特定数据点的条形落在网格线之间。如果为 false，网格线将直接位于网格中间。更多...

offsetGridLines

如果为 true，则特定数据点的条形落在网格线之间。如果为 false，网格线将直接位于网格中间。在实际项目中这是不太可能需要改变的。一般通过不同的配置来重复使用。

此设置适用于条形图的轴配置。需要为每个新添加到图表中的轴设置此设置。

options = {
    scales: {
        xAxes: [
            {
                gridLines: {
                    offsetGridLines: true
                }
            }
        ]
    }
};

默认选项

通常要将配置设置应用于所有创建的条形图。全局条形图设置存储在Chart.defaults.bar中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

barPercentage vs categoryPercentage

以下显示了百分比选项与类别百分比选项之间的关系。

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |
Sample:     |==============|

数据结构

条形图数据集的data属性被指定为一个数字数组。数据数组中的每个点对应于 x 轴上相同索引处的标签。

data: [20, 10];

堆积条形图

条形图可以通过改变 X 轴和 Y 轴上的设置来启用堆叠，将其配置为堆叠条形图。堆积的条形图可以用来显示一个数据系列是如何由许多小块构成的。

var stackedBar = new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        }
    }
});

数据集属性

以下数据集属性特定于堆叠条形图。

名称	类型	描述
stack	String	该数据集所属的组的 ID（堆叠时，每个组将是一个单独的 stack）

水平条形图

水平条形图是垂直条形图上的变体。它有时用来显示趋势数据，并排比较多个数据集。

示例

var myBarChart = new Chart(ctx, {
    type: "horizontalBar",
    data: data,
    options: options
});

配置选项

水平条形图的配置选项与条形图(bar)相同。但是，任何在条形图中 x 轴上指定的选项都将应用于水平条形图中的 y 轴。

默认的水平栏配置选项在Chart.defaults.horizontalBar中设置。

雷达图(Radar)

雷达图是显示多个数据点和它们之间的差异的一种方式。

通常用于比较两个或更多不同数据集的点。

示例用法

var myRadarChart = new Chart(ctx, {
    type: "radar",
    data: data,
    options: options
});

数据集属性

雷达图允许为每个数据集指定一些属性显示特定数据集。

所有 point *属性都可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个点，第二个值应用于第二个点，依此类推。

名称	类型	描述
label	String	图例和工具提示中的数据集的标签名
backgroundColor	Color/Color[]	填充色 参考 颜色(Colors)
borderColor	Color/Color[]	线的颜色 参考颜色(Colors)
borderWidth	Number/Number[]	线宽度(以像素为单位)
borderDash	Number[]	破折号的长度和间距 参考 MDN
borderDashOffset	Number	偏移量 参考 MDN
borderCapStyle	String	线冒样式 参考 MDN
borderJoinStyle	String	Line joint 样式 参考 MDN
fill	Boolean/String	区域填充色 更多...
lineTension	Number	贝塞尔曲线张力。0 为直线。
pointBackgroundColor	Color/Color[]	数据点填充色
pointBorderColor	Color/Color[]	数据点边框色
pointBorderWidth	Number/Number[]	数据点边框宽度(以像素为单位)
pointRadius	Number/Number[]	数据点半径。0 为不显示点
pointStyle	String/String[]/Image/Image[]	数据点样式 更多...
pointHitRadius	Number/Number[]	对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColor	Color/Color[]	鼠标悬浮时，数据点背景颜色
pointHoverBorderColor	Color/Color[]	鼠标悬浮时，数据点边框色
pointHoverBorderWidth	Number/Number[]	鼠标悬浮时数据点的边框宽度
pointHoverRadius	Number/Number[]	鼠标悬停时，数据点的半径大小

数据点风格

数据点风格选项：

• 'circle'
• 'cross'
• 'crossRot'
• 'dash'.
• 'line'
• 'rect'
• 'rectRounded'
• 'rectRot'
• 'star'
• 'triangle'

如果是使用图片，则使用drawImage在 canvas 上绘制该图像。

配置选项

与其他图表不同，雷达图表没有图表特定选项。

比例选项

雷达图只支持一个比例尺。该比例的选项在scale属性中定义。

options = {
    scale: {
        // Hides the scale
        display: false
    }
};

默认选项

通常要将配置设置应用于所有创建的雷达图表。全局雷达图表设置在Chart.defaults.radar中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

数据结构

雷达图表数据集的data属性被指定为一个数字数组。数据数组中的每个点对应于 x 轴上相同索引处的标签。

data: [20, 10];

对于雷达图表，为了表达每个点的含义，我们在图表中的每个点周围都包含一个字符串数组。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

环形&饼图(Doughnut and Pie)

饼图和环形图表可能是最常用的图表。它们被分成不同的部分，每个部分的圆弧表示每个数据的比例值。

该图表在展示数据之间的关系比例方面非常出色。

饼图和环形图在 Chart.js 中实际上是同一个类，但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0，甜甜圈默认为 50。

该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名，其他是完全一样的。

示例用法

// 饼形图
var myPieChart = new Chart(ctx, {
    type: "pie",
    data: data,
    options: options
});
// 环形图
var myDoughnutChart = new Chart(ctx, {
    type: "doughnut",
    data: data,
    options: options
});

数据集属性

环形/饼图允许为每个数据集指定多个属性以显示特定数据集。

名称	类型	描述
label	String	图例和提示中显示的标签名
backgroundColor	Color[]	数据集中每个数据区域的填充色 参考 颜色(Colors)
borderColor	Color[]	边框色 参考 颜色(Colors)
borderWidth	Number[]	边框宽度
hoverBackgroundColor	Color[]	鼠标悬浮时的填充色
hoverBorderColor	Color[]	鼠标悬浮时边框色
hoverBorderWidth	Number[]	鼠标悬浮时边框宽度

配置选项

这些是 Pie＆Donut 图表特有的自定义选项。这些选项与全局图表配置选项合并，组成最终选项。

名称	类型	默认值	描述
cutoutPercentage	Number	50 - for doughnut, 0 - for pie	从中间切出的图表的百分比。
rotation	Number	-0.5 * Math.PI	起始角度
circumference	Number	2 * Math.PI	允许图形覆盖
animation.animateRotate	Boolean	true	如果为 true，则图表将使用旋转动画进行动画。该属性在options.animation对象中。
animation.animateScale	Boolean	false	如果为 true，则将动画从中心向外缩放图表。

默认选项

我们也可以为创建的每个环形图表更改这些默认值，该配置选项在Chart.defaults.doughnut中可用。饼图还可以在Chart.defaults.pie中使用同样的值，唯一的区别是cutoutPercentage被设置为 0。

数据结构

对于饼图，数据集需要包含一组数据点。数据点应该是一个数字，Chart.js 将所有的数字汇总并计算每个数据的相对比例。

你还需要指定一个标签数组，以便在 tooltips 中显示

data = {
    datasets: [
        {
            data: [10, 20, 30]
        }
    ],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: ["Red", "Yellow", "Blue"]
};

极地图(Polar Area)

极地面积图类似于饼图，但每个线段具有相同的角度 - 线段的半径因值而异。

当我们想要显示类似于饼图的比较数据，同时也要显示上下文的值的范围时通常使用这种类型的图表。

示例用法

new Chart(ctx, {
    data: data,
    type: "polarArea",
    options: options
});

数据集属性

名称	类型	描述
label	String	在图例和工具提示中要显示数据集的标签
backgroundColor	Color[]	填充色 参考 颜色(Colors)
borderColor	Color[]	边框色 参考 颜色(Colors)
borderWidth	Number[]	边框宽度
hoverBackgroundColor	Color[]	鼠标悬浮时背景色
hoverBorderColor	Color[]	鼠标悬浮时边框色
hoverBorderWidth	Number[]	鼠标悬浮时边框宽度

配置选项

这些是特定于极地图的自定义选项。这些选项与全局图表配置选项合并，组成图表的最终选项。

默认选项

我们还可以为每个创建的极地图类型更改这些默认值，该对象在 Chart.defaults.polarArea 处可用。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

例如，要使用animateScale = false配置所有新的极地图，可以这么做：

Chart.defaults.polarArea.animation.animateScale = false;

数据结构

对于极地图，数据集需要包含一组数据点。数据点应该是一个数字，Chart.js 将统计所有的数字并计算每个数字的相对比例。你还需要指定一个标签数组，以便 tooltips 正确显示每段数据。

data = {
    datasets: [
        {
            data: [10, 20, 30]
        }
    ],

    // 悬停不同弧线时，这些标签出现在图例和工具提示中
    labels: ["Red", "Yellow", "Blue"]
};

气泡图(Bubble Chart)

气泡图用于同时显示三维数据。气泡的位置由前两个维度以及相应的水平和垂直轴线确定。第三个维度由单个气泡的大小来表示。

示例用法

// For a bubble chart
var myBubbleChart = new Chart(ctx, {
    type: "bubble",
    data: data,
    options: options
});

数据集属性

气泡图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。

名称	类型	可脚本化	可索引	默认值
backgroundColor	Color	是	是	'rgba(0,0,0,0.1)'
borderColor	Color	是	是	'rgba(0,0,0,0.1)'
borderWidth	Number	Yes	Yes	3
data	Object[]	-	-	required
hoverBackgroundColor	Color	是	是	undefined
hoverBorderColor	Color	是	是	undefined
hoverBorderWidth	Number	是	是	1
hoverRadius	Number	是	是	4
hitRadius	Number	是	是	1
label	String	-	-	undefined
pointStyle	String	是	是	circle
radius	Number	是	是	3

标签

label定义了与数据集关联的文本，并且出现在legend和tooltips中。

样式

每个气泡的风格可以通过以下属性进行控制：

名称	描述
backgroundColor	七宝背景色
borderColor	气泡边框色
borderWidth	气泡边框宽度 (以像素为单位)
pointStyle	气泡形状样式
radius	气泡半径（以像素为单位）

All these values, if undefined, fallback to the associated elements.point.* options. 如果这些值是undefined，则回退到相关的elements.point.*选项。

交互

与每个气泡的相互作用可以通过以下属性进行控制：

名称	描述
hoverBackgroundColor	悬停时气泡背景色
hoverBorderColor	悬停时气泡边框色
hoverBorderWidth	悬停时气泡边框宽度 (以像素为单位)
hoverRadius	气泡悬停时 额外半径 (以像素为单位)
hitRadius	气泡悬停时 额外命中检测半径 (以像素为单位)

如果这些值是undefined，都会回退到相关的elements.point.＊选项。

默认选项

我们也可以更改气泡图表类型的默认值。这样做会使所有在这个点之后创建的气泡图表成为新的默认值。气泡图的默认配置可以在Chart.defaults.bubble中访问。

数据结构

对于气泡图，数据集需要包含一组数据点。每个点必须实现气泡数据对象接口。

气泡数据对象

气泡图的数据以对象的形式传递。该对象必须实现以下接口。请注意，半径属性r 不会被图表缩放。它是在 canvas 上绘制的气泡的像素的原始半径。

{
    // X Value
    x: <Number>,

    // Y Value
    y: <Number>,

    // 气泡半径，不可缩放
    r: <Number>
}

离散图(Scatter Chart)

散点图基于基本折线图，x 轴更改为线性轴。要使用散点图，数据必须作为包含 X 和 Y 属性的对象传递。下面的例子创建了一个 3 点的散点图。

var scatterChart = new Chart(ctx, {
    type: "scatter",
    data: {
        datasets: [
            {
                label: "Scatter Dataset",
                data: [
                    {
                        x: -10,
                        y: 0
                    },
                    {
                        x: 0,
                        y: 10
                    },
                    {
                        x: 10,
                        y: 5
                    }
                ]
            }
        ]
    },
    options: {
        scales: {
            xAxes: [
                {
                    type: "linear",
                    position: "bottom"
                }
            ]
        }
    }
});

数据集属性

散点图支持与折线图(line chart)相同的所有属性。

数据结构

与可以以两种不同格式提供数据的折线图不同，散点图只接受点格式的数据。

data: [
    {
        x: 10,
        y: 20
    },
    {
        x: 15,
        y: 10
    }
];

混合图表(Mixed Chart Types)

Chart.js 可以创建两个或更多不同图表类型组合的混合图表。一个常见的例子是一个条形图和折线图的结合。

创建混合图表从一个基本图表的初始化开始。

var myChart = new Chart(ctx, {
    type: "bar",
    data: data,
    options: options
});

现在我们有一个标准的条形图。现在我们需要将其中一个数据集转换为折线图数据集。

var mixedChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: "Bar Dataset",
                data: [10, 20, 30, 40]
            },
            {
                label: "Line Dataset",
                data: [50, 50, 50, 50],

                // 将此数据集类型变为折线图
                type: "line"
            }
        ],
        labels: ["January", "February", "March", "April"]
    },
    options: options
});

如下有一个图表，呈现我们想要的信息。需要注意的是，在这种情况下折线图的默认选项不会合并。只有当type字段指定的类型时，默认类型的选项才会被合并。

区域图表

折线图和雷达图都支持数据集对象上的fill选项，该选项可用于创建两个数据集之间的区域或数据集与边界之间的区域，例如，比例尺origin, start or end（参见filling modes）。

注意: 这个功能是由 filler plugin实现的。

填充模式

模式	类型	值
绝对数据集索引 1	Number	1, 2, 3, ...
相对数据集索引 1	String	'-1', '-2', '+1', ...
边界 2	String	'start', 'end', 'origin'
禁用 3	Boolean	false

1 在2.2.0版中引入了数据集填充模式
2 2.6.0之前的版本, 边界值为 'zero', 'top', 'bottom' (已废弃)
3 对于向后兼容性, fill: true (默认值) 相当于fill: 'origin'

示例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fill to 'origin'
            {fill: '+2'},          // 1: fill to dataset 3
            {fill: 1},             // 2: fill to dataset 1
            {fill: false},         // 3: no fill
            {fill: '-2'}           // 4: fill to dataset 2
        ]
    }
})

配置

选项	类型	默认值	描述
plugins.filler.propagate	Boolean	true	隐藏数据集时的填充

propagate

Boolean (默认值: true)

如果为true，则填充区域将递归地扩展到由隐藏数据集目标的fill值所定义的可见目标：

示例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fill to 'origin'
            {fill: '-1'},       // 1: fill to dataset 0
            {fill: 1},          // 2: fill to dataset 1
            {fill: false},      // 3: no fill
            {fill: '-2'}        // 4: fill to dataset 2
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
})

propagate: true:

• 如果数据集2被隐藏，则数据集4将填充到数据集1
• 如果数据集2和1被隐藏，则数据集4将填充到'origin'

propagate: false:

• 如果数据集2和/或4被隐藏，则数据集4将不被填充

笛卡尔轴(Cartesian Axes)

遵循笛卡尔网格的轴被称为“笛卡尔轴”。直角坐标轴用于折线图、条形图和气泡图。 Chart.js 中默认包含四个笛卡尔坐标轴。

• linear
• logarithmic
• category
• time

通用配置

所有包含笛卡尔轴的图表都支持多种通用选项。

名称	类型	默认值	描述
type	String		图表类型
position	String		轴在图表中的位置。可用的值有: 'top', 'left', 'bottom', 'right'
id	String		连接数据集和刻度轴的 ID 更多...
gridLines	Object		网格线配置 更多...
scaleLabel	Object		刻度文字选项 更多...
ticks	Object		刻度配置 更多...

坐标轴刻度选项

以下选项对于所有直角坐标轴是通用的，但不适用于其他坐标轴。

名称	类型	默认值	描述
autoSkip	Boolean	true	如果为 true，则自动计算可以显示的标签数量并相应地隐藏其他标签。为 false 则任何时候都显示所有的标签。
autoSkipPadding	Number	0	启用autoSkip时，在水平轴上的刻度之间进行填充。 注意: 仅适用于水平刻度
labelOffset	Number	0	以像素为单位，用于从标记的中心点（x轴的y方向和y轴的x方向）偏移标签。注意: 这可能会导致边缘的标签被canvas边缘裁剪掉
maxRotation	Number	90	刻度标签的最大旋转角度。 注意: 必要时才会发生旋转 注意: 仅适用于水平刻度
minRotation	Number	0	刻度标签的最小旋转。注意：仅适用于水平刻度
mirror	Boolean	false	翻转坐标轴上的刻度标签，在图表内显示标签而不是外部。注意：仅适用于垂直刻度
padding	Number	10	在刻度标签和坐标轴之间填充。注意：仅适用于水平刻度

坐标轴ID

属性dataset.xAxisID或dataset.yAxisID必须与比例属性scales.xAxes.id或scales.yAxes.id匹配。尤其是在使用多轴图表时，这些属性尤为重要。

var myChart = new Chart(ctx, {
    type: "line",
    data: {
        datasets: [
            {
                // 该数据集出现在第一个坐标轴上
                yAxisID: "first-y-axis"
            },
            {
                // 该数据集出现在第二个坐标轴上
                yAxisID: "second-y-axis"
            }
        ]
    },
    options: {
        scales: {
            yAxes: [
                {
                    id: "first-y-axis",
                    type: "linear"
                },
                {
                    id: "second-y-axis",
                    type: "linear"
                }
            ]
        }
    }
});

创建多坐标轴

使用笛卡尔坐标轴，可以创建多个X轴和Y轴。 为此，您可以将多个配置对象添加到xAxes和yAxes属性。 在添加新坐标轴时，请确保指定新坐标轴的类型，因为在这种情况下，默认类型是 not。

在下面的例子中，我们创建了两个Y轴。然后我们使用yAxisID属性将数据集映射到正确的坐标轴。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // 将数据集绑定到左侧的y轴
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // 将数据及绑定到右侧的y轴
            yAxisID: 'right-y-axis',
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});

类别笛卡尔坐标轴

已经使用过v1.0的童鞋将会很熟悉这个类别刻度。标签是从包含在图表数据中的标签数组中抽取的。如果只定义了data.labels，则直接使用。如果定义了data.xLabels并且该轴是水平轴，则将使用该数据。同样，如果定义了data.yLabels并且该轴是垂直轴，则将使用此属性。同时使用xLabels和yLabels可以创建一个使用 X 和 Y 轴的字符串的图表。

如果没有定义，则指定上述任何设置将x轴定义为type：category。 为了更细粒度地控制类别标签，还可以将labels作为类别轴定义的一部分。 但是这样做并不适用全局默认值。

刻度配置选项

类别刻度提供了以下用于配置刻度的选项。它们嵌套在ticks子对象中。这些选项扩展了常用的刻度配置。

名称	类型	默认值	米搜书
min	String		要显示的最小项目 更多...
max	String		要显示的最大项目更多...

Min Max 配置

对于min和max属性，该值必须位于labels数组中。在下面的例子中，x轴将只显示“March”到“June”的数据。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    min: 'March'
                }
            }]
        }
    }
});

线性笛卡尔轴

线性刻度用于绘制数字数据。它可以放置在x或y轴上。散点图类型在x轴上使用此刻度后可以自动配置为折线图。顾名思义，线性插值用于确定数值在轴上的位置。

刻度配置选项

以下选项由linear scale提供。它们都位于ticks子选项中。这些选项扩展了常用的刻度配置。

名称	类型	默认值	描述
beginAtZero	Boolean		如果为 true,则刻度会在还没设置0的时候包含0
min	Number		用户定义的最小刻度，覆盖数据的最小值 更多...
max	Number		用户定义的最大刻度，覆盖数据的最大值 更多...
maxTicksLimit	Number	11	要显示的最大刻度和网格线数量
stepSize	Number		用户定义的比例尺的固定步长 更多...
suggestedMax	Number		匹配计算最大数据值时使用more...
suggestedMin	Number		匹配计算最小数据值时使用more...

轴范围设置

给坐标轴设定数值范围，了解它们之间的相互作用非常重要。

该例子中，最大的正值为50，但数据最大值扩大到了100。然而，由于最低数据值低于suggestedMin设置，因此该值将被忽略。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50,
                    suggestedMax: 100
                }
            }]
        }
    }
});

与suggested*设置相反，min和max设置显式结束于坐标轴。设置这些时，某些数据点可能不可见。

步长

如果设置该属性，则刻度标记将以stepSize的倍数枚举增加每一个刻度。如果未设置，则使用nice numbers算法自动标记。 本示例使用y轴设置图表，创建0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5的刻度。

let options = {
    scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }
};

对数笛卡尔轴

对数刻度用于绘制数字数据。它可以放置在x或y轴上。顾名思义，使用对数插值来确定数值在轴上的位置。

刻度配置选项

下列选项由对数刻度提供。它们都位于ticks子选项中。这些选项扩展了常用刻度配置。

名称	类型	默认值	描述
min	Number		用户定义的最小刻度值，覆盖数据的最小值。
max	Number		用户定义的最大刻度值，覆盖数据的最大值。

时间笛卡尔轴

时间刻度用于显示时间和日期。当建立刻度时，它会自动计算出尺度上最合适的单位。

刻度配置选项

以下选项由时间刻度提供。它们都位于time子选项中。这些选项扩展了常用刻度配置。

名称	类型	默认值	描述
displayFormats	Object		设置不同时间单位的显示方式。更多...
isoWeekday	Boolean	false	如果为true并且该单位设置为'week'，则将使用 iso weekdays
max	Time		如果定义，将覆盖数据的最大值
min	Time		如果定义，这将覆盖数据的最小值
parser	String or Function		自定义格式化日期 更多...
round	String	false	如果定义，日期将四舍五入到该单位的开始处。请参阅下面的时间单位以获取所允许使用的单位
tooltipFormat	String		tooltip的日期格式化
unit	String	false	如果定义，将强制该单位是某种类型。详细信息请参见下面的时间单位部分
unitStepSize	Number	1	网格线之间的单位数量
minUnit	String	millisecond	用于时间单位的最小显示格式

日期格式

在提供时间刻度的数据时，Chart.js支持Moment.js接受的所有格式。有关详细信息，请参阅Moment.js文档。

时间单位

支持以下时间单位。将该单位作为字符串传递给time.unit以强制使用某个单位。

• millisecond
• second
• minute
• hour
• day
• week
• month
• quarter
• year

例如，要创建一个总是以每月显示单位的时间刻度的图表，可以使用以下配置。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month'
                }
            }]
        }
    }
})

显示格式

以下显示格式用于配置如何将不同时间单位格式化为字符串来作为坐标轴轴刻度。有关允许的格式字符串，请参阅moment.js。

名称	默认值
millisecond	'SSS [ms]'
second	'h:mm:ss a'
minute	'h:mm:ss a'
hour	'MMM D, hA'
day	'll'
week	'll'
month	'MMM YYYY'
quarter	'[Q]Q - YYYY'
year	'YYYY'

例如，要将'quarter'单位的显示格式设置为显示月份和年份，则可以进行以下配置。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
})

解析器

如果这个属性被定义为一个字符串，它将被解释为一个自定义的格式，以便用来解析日期。

如果这是一个函数，它必须返回给定相应数据值的moment.js对象。

径向坐标轴

径向轴专门用于雷达和极地面积图表类型。这些坐标轴覆盖图表区域，而不是位于其中一个边上。 Chart.js中默认包含一个径向轴。

• linear

线性径向轴

线性刻度用于绘制数字数据。顾名思义，线性插值用于确定值与轴中心的关系。

以下附加配置选项由径向线性刻度提供。

配置选项

该轴具有ticks，angle lines（从中心向外显示在雷达图中的线），pointLabels（雷达图中边缘附近的标签）的配置属性。下面文档定义了这些部分中的每个属性。

名称	类型	描述
angleLines	Object	角度线配置 更多...
gridLines	Object	网格线配置 更多...
pointLabels	Object	点标签配置 更多...
ticks	Object	刻度配置 更多...

刻度选项

以下选项由线性刻度提供。它们都位于ticks子选项中。该坐标轴支持常见的刻度配置选项。

名称	类型	默认值	描述
backdropColor	Color	'rgba(255, 255, 255, 0.75)'	标签背景色
backdropPaddingX	Number	2	水平填充的背景标签
backdropPaddingY	Number	2	垂直填充的背景标签
beginAtZero	Boolean	false	如果为true，当刻度不包含0的时候，自动包含
min	Number		用户定义的最小刻度，覆盖数据的最小值更多...
max	Number		用户定义的最大刻度，覆盖数据的最大值更多...
maxTicksLimit	Number	11	要显示的最大刻度和网格线数量
stepSize	Number		用户定义的比例尺的固定步长 更多...
suggestedMax	Number		计算最大数据值时使用的调整更多...
suggestedMin	Number		计算最小数据值时使用的调整更多...
showLabelBackdrop	Boolean	true	如果为true，则在刻度标签后面绘制背景

坐标轴范围设置

考虑到轴范围设置的数量，理解它们如何相互作用是很重要的。

建议的最大和建议的最小设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动贴合行为很有用。

suggestedMax和suggestedMin设置只用于更改缩放轴的数据值。这些属性对于扩展轴的范围以及保持自动匹配行为是很有帮助的。

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

在本例中，最大的正值为50，但数据最大值扩大到了100。然而，由于最低数据值低于suggestedMin设置，因此该值将被忽略。

let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scale: {
            ticks: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

与suggested*设置相反，min和max设置显式结束于坐标轴。设置这些属性时，某些数据点可能不可见。

步长

如果设置的话，则刻度标记将以stepSize的倍数枚举增加刻度。如果未设置，则使用nice numbers算法自动标记。

本示例使用y轴设置图表，创建0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5的刻度。

let options = {
    scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }
};

角度线选项

以下选项用于配置从图表中心向点标签辐射的角度线。它们可以在angleLines子选项中找到。请注意，这些选项仅适用于angleLines.display为true的情况。

名称	类型	默认值	描述
display	Boolean	true	如果为true，则显示角度线
color	Color	rgba(0, 0, 0, 0.1)	角度线颜色
lineWidth	Number	1	角度线宽度

点标签选项

以下选项用于配置刻度边界上显示的点标签。它们可以在pointLabels子选项中找到。请注意，这些选项仅适用于pointLabels.display为true的情况。

名称	类型	默认值	描述
callback	Function		将数据标签转换为点标签的回调函数。默认只返回当前字符串
fontColor	Color	'#666'	点标签的字体颜色
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	渲染标签时使用的字体
fontSize	Number	10	字体大小(以像素为单位)
fontStyle	String	'normal'	渲染点标签时使用的字体样式

坐标轴标记

创建图表时，您需要告诉查看者查看哪些数据。要做到这一点，你需要在坐标轴上做一些标签。

刻度标题配置

刻度标签配置在scaleLabel的配置下。它定义了刻度标题的选项。需要注意，这仅适用于笛卡尔坐标轴。

名称	类型	默认值	描述
display	Boolean	false	如果为 true，则显示轴标题
labelString	String	''	标题的文字 (例如 "# of People" or "Respone Choices").
fontColor	Color	'#666'	刻度标题颜色
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	刻度标题字体，遵循 CSS font-family 选项。 (例如"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"）
fontSize	Number	12	刻度标题文字大小
fontStyle	String	'normal'	刻度标题字体类型 遵循 CSS font-style 选项 (例如 normal, italic, oblique, initial, inherit)

创建自定义刻度格式

通常要更改刻度标记以包含有关数据类型的信息。例如，添加一个美元符号（'$'）。为此，需要重写轴配置中的 ticks.callback 方法。

在以下示例中，在 Y 轴的每个标签前显示一个美元符号。

如果回调函数返回 null 或undefined，则关联的网格线将被隐藏。

var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        scales: {
            yAxes: [
                {
                    ticks: {
                        // 在ticks中包含一个美元符号
                        callback: function(value, index, values) {
                            return "$" + value;
                        }
                    }
                }
            ]
        }
    }
});

样式(Styling)

有许多选项可用于设置坐标轴的样式。以下是设置网格线和刻度的配置。

网格线配置

网格线配置嵌套在gridLines配置下。它定义垂直于轴线的网格线的选项。

名称	类型	默认值	描述
display	Boolean	true	如果为false，则不显示该轴的网格线
color	Color or Color[]	'rgba(0, 0, 0, 0.1)'	网格线的颜色。如果指定为数组，则第一种颜色适用于第一个网格线，第二种适用于第二个网格线，依此类推
borderDash	Number[]	[]	网格线上的折号的长度和间距。 参看 MDN
borderDashOffset	Number	0	线破折号的偏移量 参见 MDN
lineWidth	Number or Number[]	1	网格线的行程宽度
drawBorder	Boolean	true	如果为true，则在坐标轴和图表区域之间的边缘绘制边框
drawOnChartArea	Boolean	true	如果为true，则在轴线内的图表区域绘制线条。当有多个轴并且您需要控制绘制哪些网格线时，该选项将会很有帮助
drawTicks	Boolean	true	如果为true，则在图表旁边的轴区域中的刻度旁绘制线条
tickMarkLength	Number	10	绘制到坐标轴区域内的网格线的长度(以像素为单位)
zeroLineWidth	Number	1	第一个索引（索引0）的网格线的行绘制宽度
zeroLineColor	Color	'rgba(0, 0, 0, 0.25)'	第一个索引（索引0）的网格线的绘制颜色
zeroLineBorderDash	Number[]	[]	第一个索引（索引0）的网格线的连接号的长度和间距。请参阅MDN
zeroLineBorderDashOffset	Number	0	第一个索引（索引0）的网格线的连接号。请参阅MDN
offsetGridLines	Boolean	false	如果为true，则将标签移动到网格线之间。一般用于条形图中，通常不应使用。 `

刻度配置

tick配置嵌套在ticks配置下的scale配置。其定义了坐标轴生成的刻度线的选项。

名称	类型	默认值	描述
callback	Function		返回应在图表上显示的刻度值(字符串表示形式) 参考 callback.
display	Boolean	true	如果为true，则显示刻度标记
fontColor	Color	'#666'	刻度标签字体颜色
fontFamily	String	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	刻度标签的字体，遵循CSS字体家族选项
fontSize	Number	12	刻度标签的字体大小
fontStyle	String	'normal'	刻度标签的字体样式，遵循CSS字体样式选项（即normal, italic, oblique, initial, inherit)
reverse	Boolean	false	刻度标签反序

图表原型方法

对于每个图表，共享ChartType上有一组全局原型方法，你可能会发现它们很有用。这些在 Chart.js 创建的所有图表上都可用，但是对于这些示例，我们使用我们制作的折线图。

// For example:
var myLineChart = new Chart(ctx, config);

.destroy()

使用此方法来销毁我们创建的任何图表实例。这将会清除 Chart.js 中对 chart 对象的所有引用，以及由 Chart.js 附加的任何关联的事件监听。该方法必须在 canvas 重新用于新图表之前调用。

// Destroys a specific chart instance
myLineChart.destroy();

.update(config)

触发图表的更新。这可以在更新数据对象之后安全地调用。这将更新所有的比例，图例，然后重新渲染图表。

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

注意: 只在替换数据引用时起作用 (例如 myLineChart.data = {datasets: [...]}

可以为config对象提供更新过程的附加配置。 当在事件处理程序中手动调用update并且需要一些不同的动画时将非常有用。

支持以下属性：

• duration (number): 动画重绘的时间，以毫秒为单位
• lazy (boolean): 如果为true，则动画可以被其他动画中断
• easing (string): 动画的easing函数。 相关值请参阅Animation Easing。

例子:

myChart.update({
    duration: 800,
    easing: 'easeOutBounce'
})

参见更新 Charts 获取更多详细信息

.reset()

将图表重置为初始动画之前的状态。然后可以使用update来触发新的动画。

myLineChart.reset();

.render(config)

触发所有图表元素的重绘。 请注意，这不会更新新数据的元素。 在这种情况下使用.update（）。

See .update(config) for more details on the config object.

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.render({
    duration: 800,
    lazy: false,
    easing: 'easeOutBounce'
});

.stop()

使用它来停止任何当前的动画循环。 这将在当前的动画帧中暂停图表。 调用.render（）重新启用动画。

// Stops the charts animation loop at its current frame
myLineChart.stop();
// => returns 'this' for chainability

.resize()

使用该方法来手动调整画布元素的大小。 每次调整 canvas 容器的大小时都会执行此操作，但如果要更改 canvas 节点容器元素的大小，则可以手动调用此方法。

// Resizes & redraws to fill its container element
myLineChart.resize();
// => returns 'this' for chainability

.clear()

将清除图表 canvas。 在动画帧之间广泛使用。

// Will clear the canvas that myLineChart is drawn on
myLineChart.clear();
// => returns 'this' for chainability

.toBase64Image()

返回当前状态的图表的基本 64 位编码字符串

myLineChart.toBase64Image();
// => returns png data url of the image on the canvas

.generateLegend()

返回该图表的从legendCallback选项中生成的图例 HTML 字符串。

myLineChart.generateLegend();
// => returns HTML string of a legend for this chart

.getElementAtEvent(e)

在 Chart 实例上调用getElementAtEvent（event）传递一个事件或 jQuery 事件的参数将返回事件位置的单个元素。 如果范围内有多个项目，则只返回第一个项目。 从这个方法返回的值是一个带有单个参数的数组，用于保持get * AtEvent方法之间的一致的 API。

myLineChart.getElementAtEvent(e);
// => returns the first element at the event point.

To get an item that was clicked on, getElementAtEvent can be used.

function clickHandler(evt) {
    var firstPoint = myChart.getElementAtEvent(evt)[0];

    if (firstPoint) {
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    }
}

.getElementsAtEvent(e)

查找事件点下的元素，然后返回相同数据索引处的所有元素。 在内部用于“标签”模式突出显示。在 Chart 实例上调用getElementsAtEvent（event )传递一个事件的参数或 jQuery 事件，将返回那个事件的相同位置上的点元素。

canvas.onclick = function(evt) {
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
};

这个功能对于实现基于 DOM 的工具提示，或者在应用程序中触发自定义行为是有用的。

.getDatasetAtEvent(e)

查找事件点下的元素，然后返回该数据集中的所有元素。 在内部用于'dataset'模式突出显示。

myLineChart.getDatasetAtEvent(e);
// => returns an array of elements

.getDatasetMeta(index)

查找与当前索引相匹配的数据集并返回该元数据。 此返回的数据具有用于构建图表的所有元数据。

元数据的data属性将包含关于每个点，矩形等的信息，具体取决于图表类型。 Chart.js tests中提供了大量的用法示例。

var meta = myChart.getDatasetMeta(0);
var x = meta.data[0]._model.x;

更新 Charts

在创建图表后更新图表是非常常见的。图表数据更改后，Chart.js 将动画显示新的数据值。

添加或移除数据

通过更改数据数组来支持添加和删除数据。要添加数据，只需将数据添加到数据数组中，如本例所示。

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach(dataset => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach(dataset => {
        dataset.data.pop();
    });
    chart.update();
}

更新选项

更新选项支持选择已有选择属性或传递新选项对象。

• 如果选项发生了变化，则会保留其他选项属性，包括由Chart.js计算的选项属性。
• 如果创建为新对象 - 旧选项将被丢弃。

function updateConfigByMutating(chart) {
    chart.options.title.text = 'new title';
    chart.update();
}

function updateConfigAsNewObject(chart) {
    chart.options = {
        responsive: true,
        title:{
            display:true,
            text: 'Chart.js'
        },
        scales: {
            xAxes: [{
                display: true
            }],
            yAxes: [{
                display: true
            }]
        }
    }
    chart.update();
}

可以单独更新比例尺而不更改其他选项。 要更新比例，请传入包含所有定制的对象，包括那些不变的数据。

使用新的id或更改后的type更新比例后，引用chart.scales中的任何一个的变量将会丢失。

function updateScales(chart) {
    var xScale = chart.scales['x-axis-0'];
    var yScale = chart.scales['y-axis-0'];
    chart.options.scales = {
        xAxes: [{
            id: 'newId',
            display: true
        }],
        yAxes: [{
            display: true,
            type: 'logarithmic'
        }]
    }
    chart.update();
    // need to update the reference
    xScale = chart.scales['newId'];
    yScale = chart.scales['y-axis-0'];
}

你也可以通过指定其索引或ID来更新特定比例。

function updateScale(chart) {
    chart.options.scales.yAxes[0] = {
        type: 'logarithmic'
    }
    chart.update();
}

用于更新选项的代码示例可以在toggle-scale-type.html中找到。

阻止动画

有时当图表更新时，您可能不需要动画。为此，你可以设置update 的持续时间为 0.这将会同步渲染图表，而不需要动画。

插件(Plugins)

插件是自定义或更改图表默认行为的最有效方式。它们已经在2.1.0 版本（仅限于全局插件）中引入，并且在2.5.0 版本（每个图表插件和选项）中进行了扩展。

使用插件

插件可以在图表实例之间共享：

var plugin = {
    /* plugin implementation */
};

// chart1 and chart2 use "plugin"
var chart1 = new Chart(ctx, {
    plugins: [plugin]
});

var chart2 = new Chart(ctx, {
    plugins: [plugin]
});

// chart3 doesn't use "plugin"
var chart3 = new Chart(ctx, {});

插件也可以直接在图表插件配置（即内联插件）中定义：

var chart = new Chart(ctx, {
    plugins: [
        {
            beforeInit: function(chart, options) {
                //..
            }
        }
    ]
});

但是，当需要自定义选项适用于多个图表时，这种方法并不理想。

全局插件

插件可以在全局范围内注册，应用于所有图表（即全局插件）：

Chart.plugins.register({
    // plugin implementation
});

注意: inline 插件不能全局注册

配置

插件 ID

插件必须定义一个唯一的 ID 以便可配置。

该 id 应该遵循npm 包名称约定：

• 不能以点或下划线开头
• 不能包含任何非网址安全的字符
• 不能包含大写字母
• 简短并合理的描述

如果打算公开发布一个插件，你可能要检查registry，看看该名字的插件是否已经存在。需要注意的是，在这种情况下，包名称应以 chartjs-plugin-为前缀，以显示在 Chart.js 插件注册表中。

插件选项

插件选项位于options.plugins配置下，并由插件 ID：options.plugins.{plugin-id}作为作用域。

var chart = new Chart(ctx, {
    config: {
        foo: { ... },           // chart 'foo' option
        plugins: {
            p1: {
                foo: { ... },   // p1 plugin 'foo' option
                bar: { ... }
            },
            p2: {
                foo: { ... },   // p2 plugin 'foo' option
                bla: { ... }
            }
        }
    }
});

禁用插件

要为特定图表禁用全局插件，插件选项必须设置为false：

Chart.plugins.register({
    id: "p1"
    // ...
});

var chart = new Chart(ctx, {
    config: {
        plugins: {
            p1: false // disable plugin 'p1' for this instance
        }
    }
});

插件核心 API

可用钩子 (从 2.6 版本开始):

• beforeInit
• afterInit
• beforeUpdate (cancellable)
• afterUpdate
• beforeLayout (cancellable)
• afterLayout
• beforeDatasetsUpdate (cancellable)
• afterDatasetsUpdate
• beforeRender (cancellable)
• beforeDatasetUpdate (cancellable)
• afterDatasetUpdate
• beforeRender (cancellable)
• afterRender
• beforeDraw (cancellable)
• afterDraw
• beforeDatasetsDraw (cancellable)
• afterDatasetsDraw
• beforeEvent (cancellable)
• beforeDatasetDraw (cancellable)
• afterDatasetDraw
• beforeEvent (cancellable)
• afterEvent
• resize
• destroy

新的图表(New Charts)

Chart.js 2.0为每个数据集引入了控制器的概念。像scales一样，可以根据需要编写新的控制器。

Chart.controllers.MyType = Chart.DatasetController.extend({});

// 现在我们可以使用Chart.js API创建图表的一个新实例
new Chart(ctx, {
    // 这是构造函数注册的字符串，即Chart.controllers.MyType
    type: "MyType",
    data: data,
    options: options
});

数据集控制器接口

数据集控制器必须实现以下接口

{
    // 为数据集中的每条数据创建元素。将数据集中的元素作为dataset.metaData存储在数据集中
    addElements: function() {},

    // 为给定索引处的数据创建单个元素并重置其状态
    addElementAndReset: function(index) {},

    // 绘制数据集的表示形式
    // @param ease : 如果指定该参数，则此数字代表转换元素的距离。在任何提供的控制器中查看 draw（）的实现以了解如何使用它
    draw: function(ease) {},

    // 从给定元素删除悬停样式
    removeHoverStyle: function(element) {},

    // 将悬停样式添加到给定的元素
    setHoverStyle: function(element) {},

    // 更新元素以响应新数据
    // @param reset : 如果为true，则将元素置于复位状态，以便它们可以持续动画直到其最终值
    update: function(reset) {},
}

派生数据集控制器可以选择覆盖以下方法

{
    // 初始化控制器
    initialize: function(chart, datasetIndex) {},

    // 确保由此控制器表示的数据集链接到一个scale。覆盖极地图的helpers.noop和doughnut控制器
    // 使用单一比例的图表类型
    linkScales: function() {},

    // 当更新被触发时，由主图表控制器调用。默认实现处理更改数据点的数量并适当地创建元素。
    buildOrUpdateElements: function() {}
}

扩展现有的图表类型

扩展或替换现有的控制器类型非常简单。只需用您自己的内置类型替换其中一种内置类型的构造函数即可。

内置的控制器类型:

• Chart.controllers.line
• Chart.controllers.bar
• Chart.controllers.radar
• Chart.controllers.doughnut
• Chart.controllers.polarArea
• Chart.controllers.bubble

例如，要派生一个从气泡图扩展而来的新图表类型，您可以执行以下操作。

// 将'derivedBubble'的默认配置设置为与气泡值默认值相同。
// 我们通过执行Chart.defaults [chartType]来查找默认值
// 这里好像是个bug，当默认值不存在的时候
Chart.defaults.derivedBubble = Chart.defaults.bubble;

// 我认为推荐使用Chart.controllers.bubble.extend（{extensions here};
var custom = Chart.controllers.bubble.extend({
    draw: function(ease) {
        // 先调用super方法
        Chart.controllers.bubble.prototype.draw.call(this, ease);

        // 现在我们可以为这个数据集做一些自定义绘图。在这里我们将围绕每个数据集中的第一个点绘制一个红色框
        var meta = this.getMeta();
        var pt0 = meta.data[0];
        var radius = pt0._view.radius;

        var ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.strokeRect(
            pt0._view.x - radius,
            pt0._view.y - radius,
            2 * radius,
            2 * radius
        );
        ctx.restore();
    }
});

// 存储控制器以便图表初始化程序可以查找它
// Chart.controllers[type]
Chart.controllers.derivedBubble = custom;

// 现在我们可以创建和使用我们的新图表类型
new Chart(ctx, {
    type: "derivedBubble",
    data: data,
    options: options
});

条形图控制器

条形图控制器有一个你应该知道的特殊属性。要正确计算条形的宽度，控制器必须确定映射到条的数据集的数量。为此，条形控制器在初始化期间将属性bar附加到数据集。当创建或更新条形控制器时，使用这种方式来做。以确保具有常规条形图和新的派生条形的图表能够无缝工作。

贡献

我们欢迎您对类库的贡献，但我们要求您遵循以下准则：

• 使用制表符缩进，而不是空格
• 只更改/src中的单个文件
• gulp lint会为你运行eslint来检查你的代码是否会通过代码标准
• gulp test检查你的代码是否会通过测试
• 保持pull请求简洁，并在相关的.md文件中记录新的功能
• 考虑到您的更改是否对所有用户有用，否则可以考虑是否创建Chart.js插件更合适
• 除非有即将发布的主要版本，否则不要重复更改。 我们鼓励为大多数新的高级功能编写插件以关注向后兼容性。

加入该项目

请活跃的提交者和贡献者介绍自己并请求提交对此项目的访问权限。我们有一个非常活跃的Slack社区，您可以在这里加入。如果您认为您可以提供帮助，我们很乐意为您服务！

构建和测试

Chart.js使用gulp将库建立到单个JavaScript文件中。 首先，我们需要确保安装开发依赖项。在安装了node和npm之后，将Chart.js库克隆到本地目录，然后在命令行中导航到该目录，我们可以运行以下命令：

> npm install
> npm install -g gulp

这将安装Chart.js的本地开发依赖项，以及JavaScript自动化工具gulp CLI。

可以在仓库根目录执行以下命令:

> gulp build                // 在./dist中构建Chart.js
> gulp unittest             // 从./test/specs运行测试
> gulp unittest --watch     // 运行测试并观察源代码更改
> gulp unittest --coverage  // 运行测试并在./coverage中生成覆盖率报告e
> gulp lint                 // 执行代码检查（ESLint）
> gulp test                 // 执行代码检查并运行单元测试
> gulp docs                 // 在./dist/docs中构建文档

更多信息可以在gulpfile.js中找到。

错误和问题

请在github.com/chartjs/Chart.jsGitHub页面上反馈。请不要将issues用于支持请求。有关使用Chart.js的帮助，请查看Stack Overflow上的chartjs标签。

结构良好的详细错误报告对于该项目非常有价值。

报告错误指南：

• 搜索issue以查看它是否已被反馈
• 将问题隔离到一个简单的测试用例
• 请在JS Bin，JS Fiddle或Codepen等网站上演示此bug。 (模板)

请提供与错误相关的任何其他详细信息，是否是浏览器或特殊的屏幕分辨率，或只发生在特定的配置或数据。

与其他图表库对比

库特性

特性	Chart.js	D3	HighCharts	Chartist
完全免费	✓	✓		✓
Canvas	✓
SVG		✓	✓	✓
内置图表	✓		✓	✓
8+图表类型	✓	✓	✓
可扩展自定义图表	✓	✓
支持现代浏览器	✓	✓	✓	✓
丰富的文档	✓	✓	✓	✓
开源	✓	✓	✓	✓

内置图表类型

类型	Chart.js	HighCharts	Chartist
混合图表	✓	✓
折线图	✓	✓	✓
柱状图	✓	✓	✓
水平柱状图	✓	✓	✓
饼图/环形图	✓	✓	✓
极地图	✓	✓
雷达图	✓
离散图	✓	✓	✓
气泡图	✓
仪表盘		✓
地图 (热力图/树形图/等等)		✓

热门扩展

大部分的扩展都可以在Chart.js GitHub organization 或者 npm registry找到。

Charts

• chartjs-chart-financial - 添加财务图表类型，如candlestick。
• Chart.BarFunnel.js - 添加漏斗图图表类型。
• Chart.LinearGauge.js - 添加线性量表图表类型。
• Chart.Smith.js - 添加Smith图表类型。

在npm registry中可以找到更多图表。

插件

• chartjs-plugin-annotation.js - 在图表区域绘制线条和框。
• chartjs-plugin-datalabels - 在任何类型的图表的数据上显示标签。
• chartjs-plugin-deferred.js - 图表懒加载。
• chartjs-plugin-draggable.js - 鼠标拖动图表。
• chartjs-plugin-stacked100.js - 绘制100％堆叠条形图。
• chartjs-plugin-streaming - 创建直播流式图表。
• chartjs-plugin-waterfall - 轻松使用瀑布图。
• chartjs-plugin-zoom.js - 在图表上启用缩放和平移。

在npm registry 中可以找到更多插件。

与其他项目集成

Angular (v2+)

• emn178/angular2-chartjs
• valor-software/ng2-charts

Angular (v1)

• angular-chart.js
• tc-angular-chartjs
• angular-chartjs
• Angular Chart-js Directive

React

• react-chartjs2
• react-chartjs-2

Django

• Django JChart
• Django Chartjs

Ruby on Rails

• chartjs-ror

Laravel

• laravel-chartjs

Vue.js

• vue-chartjs

Java

• Chart.java

GWT (Google Web toolkit)

• Charba

Ember.js

• ember-cli-chart