标题： 拆线图表
作者： line-chart
翻译日期：2016-11-24
前言
拆线图表，是把各个数据点用线连接起来的图表，通常用来表现数据的趋势，或者不同数据之间的比较。
示例
<div class="canvas-holder">
<canvas width="250" height="125"></canvas>
</div>
var myLineChart = new Chart(ctx, {
type: 'line',
data: data, //第二个data表示的是数据数组，用过chart.js的都知道，下面也是。
options: options //第二个options表示的是options json数据
});
拆线图表也可用下面这种 v1.0 语法创建
var myLineChart = Chart.Line(ctx, {
data: data,
options: options
});
Dataset 数据结构
拆线数据 dataset 可以用下面这些选项来定义。
All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
节点 | 类型 | 用法 |
data | 参阅下面 data point 一节 | The data to plot in a line |
label | | 标注，会显示在弹窗提示（tooltips） 和 图例（legend）中 |
xAxisID | | The ID of the x axis to plot this dataset on |
yAxisID | | The ID of the y axis to plot this dataset on |
fill | | 如果是，填充拆线下面的空间 |
lineTension | | 贝塞尔曲线曲率，0-1，1是最平滑 注意：该字段原名为 |
backgroundColor | | 填充拆线下面的空间 参阅 Colors |
borderWidth | | 拆线粗细，单位： |
borderColor | | 拆线颜色 |
borderCapStyle | | Cap style of the line. See MDN |
borderDash | | Length and spacing of dashes. See MDN |
borderDashOffset | | Offset for line dashes. See MDN |
borderJoinStyle | | Line joint style. See MDN |
pointBorderColor | | The border color for points. |
pointBackgroundColor | | The fill color for points |
pointBorderWidth | | The width of the point border in pixels |
pointRadius | | The radius of the point shape. If set to 0, nothing is rendered. |
pointHoverRadius | | The radius of the point when hovered |
pointHitRadius | | The pixel size of the non-displayed point that reacts to mouse events |
pointHoverBackgroundColor | | Point background color when hovered |
pointHoverBorderColor | | Point border color when hovered |
pointHoverBorderWidth | | Border width of point when hovered |
pointStyle | | The style of point. Options are ‘circle’, ‘triangle’, ‘rect’, ‘rectRot’, ‘cross’, ‘crossRot’, ‘star’, ‘line’, and ‘dash’. If the option is an image, that image is drawn on the canvas using |
showLine | | If false, the line is not drawn for this dataset |
spanGaps | | If true, lines will be drawn between points with no or null data |
steppedLine | | If true, the line is shown as a stepped line and ‘lineTension’ will be ignored |
An example data object using these attributes is shown below.
var data = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [
{
label: "我的第一个dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
};
The line chart usually requires an array of labels. This labels are shown on the X axis. There must be one label for each data point. More labels than datapoints are allowed, in which case the line ends at the last data point.
The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.
The label key on each dataset is optional, and can be used when generating a scale for the chart.
When spanGaps is set to true, the gaps between points in sparse datasets are filled in. By default, it is off.
Data Points
The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the data.labels array must be specified and must contain a label for each point or, in the case of labels to be displayed over multiple lines an array of labels (one for each line) i.e [["June","2015"], "July"].
The alternate is used for sparse datasets. Data is specified using an object containing x and y properties. This is used for scatter charts as documented below.
Scatter Line Charts
Scatter line charts can be created by changing the X axis to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
var scatterChart = new Chart(ctx, {
type: 'line',
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'
}]
}
}
});
Chart Options
These are the customisation options specific to Line charts. These options are merged with the global chart configuration options, and form the options of the chart.
Name | Type | Default | Description |
showLines | Boolean | true | If false, the lines between points are not drawn |
spanGaps | Boolean | false | If true, NaN data does not break the line |
You can override these for your Chart instance by passing a member options into the Line method.
For example, we could have a line chart display without an X axis by doing the following. The config merge is smart enough to handle arrays so that you do not need to specify all axis settings to change one thing.
new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
display: false
}]
}
}
});
We can also change these defaults values for each Line type that is created, this object is available at Chart.defaults.line.
Stacked Charts
Stacked area charts can be created by setting the Y axis to a stacked configuration. The following example would have stacked lines.
var stackedLine = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
