chart. js 官方文档中文译本

条形图

条形图提供了一种显示以垂直长条表示的数据值的方式。有时用于显示代表某一趋势的数据，并且可同时并排比较多个数据集。

{
"type": "bar",
"data": {
"labels": [
"January", 
"February", 
"March", 
"April", 
"May", 
"June", 
"July"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}

使用示例

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[]	条形图的填充颜色,请参阅颜色
borderColor	Color/Color[]	条形图轮廓描边的颜色,请参阅颜色
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	每个栏的可用宽度的百分比（0-1）应在类别百分比内。 1.0将占据整个类别的宽度，并将条形图放在彼此旁边。 更多...
categoryPercentage	Number	0.8	用于设置条形图中长条的每个数据点的可用宽度的百分比（0-1）（小数据集的网格线之间的间距）。 更多...
barThickness	Number		手动设置每个栏的宽度（以像素为单位）。如果未设置，则使用barPercentage和categoryPercentage自动调整条形图;
maxBarThickness	Number		设置此项以确保自动调整的尺寸的尺寸不会大于此厚度。仅当barThickness未设置（启用自动调整大小）时才起作用。
gridLines.offsetGridLines	Boolean	true	如果为true，则特定数据点的条形线落在网格线之间。如果为false，网格线将沿着条形图的中间。 更多...（

offsetGridLines

如果为true，则特定数据点的条形线落在网格线之间。如果为false，网格线将沿着条形图的中间。这在实际开发环境中不太可能需要改变。它存在更多的方式通过配置存在重用轴代码

气泡图

气泡图用于显示一组三维数据。气泡图中气泡的位置由前两个维度(水平坐标 x 和垂直坐标 y )确定, 气泡的大小由第三个维度 r 来确定。

 {
    “type”：“bubble”，
    “data”：{
        “datasets”：[{
            “label”：“第一个数据集”，
            “data”：[{
                “x”：20，
                “y”：30，
                “r”：15
            }，{
                “x”：40，
                “y”：10，
                “r”：10
            }]，
            “backgroundColor”：“rgb（255，99，132）”
        }]
    }，
}

使用示例

//气泡图
var myBubbleChart = new Chart(ctx,{
    type: 'bubble',//设置图形类别为气泡图
    data: data, //设置图形数据
    options: options//设置图形属性配置选项
});

数据集属性

气泡图允许为每个数据集指定多个属性。这些用于设置特定数据集的显示属性。例如，通常这样设置气泡的颜色。

除“label”之外的所有属性都可以指定为数组。如果将这些值设置为数组值，则第一个值适用于数据集中的第一个气泡，第二个值适用于第二个气泡，以此类推。

名称	类型	描述
label	String	数据集的标签出现在图例和浮动提示框中。
backgroundColor	Color/Color[]	气泡的填充颜色。
borderColor	Color/Color[]	气泡的轮廓描边颜色。
borderWidth	Number / Number []	气泡的轮廓描边的宽度(以像素为单位)。
hoverBackgroundColor	Color/Color[]	悬停时的气泡背景颜色。
hoverBorderColor	Color/Color[]	悬停时的气泡边框颜色。
hoverBorderWidth	Number / Number []	悬停时点的边界宽度。
hoverRadius	Number / Number []	悬停时添加到数据半径的附加半径。

配置选项

气泡图没有唯一的配置选项。要配置所有气泡共有的选项，使用[point element options]（../ configuration / elements / point.md＃point-configuration）。

默认选项

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

数据结构

对于气泡图，数据集需要包含一组数据点。每个点都必须实现[bubble data object]（＃bubble-data-object）接口。

Bubble Data Object

气泡图的数据以对象的形式传递。对象必须实现以下界面。重要的是要注意，图表中的radius属性r是不可缩放的。它表示在气泡图上对应的气泡的原始半径（以像素为单位）。

{
    // X轴坐标的值
    x：<Number>，

    // Y轴坐标的值
    y：<Number>，

    //气泡的半径大小(不可缩放)。
    r：<Number>
}