条形图
条形图提供了一种显示以垂直长条表示的数据值的方式。有时用于显示代表某一趋势的数据，并且可同时并排比较多个数据集。
{"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 lefttopright
配置选项
条形图定义了以下配置选项。这些选项与全局图表配置选项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： ， // Y轴坐标的值 y： ， //气泡的半径大小(不可缩放)。 r： }