条形图

条形图供应了一种显现以垂直长条示意的数据值的体式格局。偶然用于显现代表某一趋向的数据，而且可同时并排比较多个数据集。

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

数据集属性

条形图许可为每一个数据集指定多个属性。这些属性用于设置特定数据集的显现结果。比方，一般如许设置条形图中长条的色彩。

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

borderSkipped

此设置用于防止在添补底部绘制条形笔触。一般来说，除了建立从条形图导出的图表范例以外，不须要变动。

选项是：
*bottom

• left

• top

• right

设置选项

条形图定义了以下设置选项。这些选项与全局图表设置选项Chart.defaults.global兼并，以构成通报到图表的选项。

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”以外的一切属性都能够指定为数组。假如将这些值设置为数组值，则第一个值适用于数据集合的第一个气泡，第二个值适用于第二个气泡，以此类推。

设置选项

气泡图没有唯一的设置选项。要设置一切气泡共有的选项，运用[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>
}