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
});

数据集属性

条形图允许为每个数据集指定多个属性。这些属性用于设置特定数据集的显示效果。例如,通常这样设置条形图中长条的颜色。

一些属性可以指定为数组。如果这些值设置为数组值,则第一个值适用于条形图中第一个长条,第二个值应用于条形图中第二个长条,以此类推。

名称类型描述
labelString数据集的标签出现在图例和浮动提示框中
xAxisIDString打印此数据集的x轴的ID.如果未指定,则默认为第一个找到的x轴的ID
yAxisIDString要绘制此数据集的y轴的ID.如果未指定,则默认为首次找到的y轴的ID
backgroundColorColor/Color[]条形图的填充颜色,请参阅颜色
borderColorColor/Color[]条形图轮廓描边的颜色,请参阅颜色
borderWidthNumber / Number []条的轮廓描边宽度(以像素为单位)
borderSkippedString哪个边缘跳过绘制边框.更多…
hoverBackgroundColorColor/Color[]悬停时条形图的填充颜色
hoverBorderColorColor/Color[]悬停时条形图的轮廓描边颜色
hoverBorderWidthNumber / Number []悬停时条形图轮廓描边宽度

borderSkipped

此设置用于避免在填充底部绘制条形笔触。一般来说,除了创建从条形图导出的图表类型之外,不需要更改。

选项是:
*bottom

  • left

  • top

  • right

配置选项

条形图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并,以形成传递到图表的选项。

名称类型默认描述
barPercentageNumber0.9每个栏的可用宽度的百分比(0-1)应在类别百分比内。 1.0将占据整个类别的宽度,并将条形图放在彼此旁边。 更多…
categoryPercentageNumber0.8用于设置条形图中长条的每个数据点的可用宽度的百分比(0-1)(小数据集的网格线之间的间距)。 更多…
barThicknessNumber手动设置每个栏的宽度(以像素为单位)。如果未设置,则使用barPercentagecategoryPercentage自动调整条形图;
maxBarThicknessNumber设置此项以确保自动调整的尺寸的尺寸不会大于此厚度。仅当barThickness未设置(启用自动调整大小)时才起作用。
gridLines.offsetGridLinesBooleantrue如果为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”之外的所有属性都可以指定为数组。如果将这些值设置为数组值,则第一个值适用于数据集中的第一个气泡,第二个值适用于第二个气泡,以此类推。

名称类型描述
labelString数据集的标签出现在图例和浮动提示框中。
backgroundColorColor/Color[]气泡的填充颜色。
borderColorColor/Color[]气泡的轮廓描边颜色。
borderWidthNumber / Number []气泡的轮廓描边的宽度(以像素为单位)。
hoverBackgroundColorColor/Color[]悬停时的气泡背景颜色。
hoverBorderColorColor/Color[]悬停时的气泡边框颜色。
hoverBorderWidthNumber / Number []悬停时点的边界宽度。
hoverRadiusNumber / 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>
}
    原文作者:黄昏别馆
    原文地址: https://segmentfault.com/a/1190000009176715
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞