折线图

¥Line Chart

折线图是一种在线上绘制数据点的方法。通常，它用于显示趋势数据或两个数据集的比较。

¥A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

const config = { type: 'line', data: data, };

const config = {
  type: 'line',
  data: data,
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

数据集属性

¥Dataset Properties

命名空间：

¥Namespaces:

• data.datasets[index] - 仅此数据集的选项

  ¥data.datasets[index] - options for this dataset only

• options.datasets.line - 所有线数据集的选项

  ¥options.datasets.line - options for all line datasets

• options.elements.line - 所有 线条元素 的选项

  ¥options.elements.line - options for all line elements

• options.elements.point - 所有 点元素 的选项

  ¥options.elements.point - options for all point elements

• options - 整个图表的选项

  ¥options - options for the whole chart

折线图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。比如一条线的颜色一般都是这样设置的。

¥The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

名称	类型	可编写脚本	可转位	默认
backgroundColor	Color	是的	*	'rgba(0, 0, 0, 0.1)'
borderCapStyle	string	是的	*	'butt'
borderColor	Color	是的	*	'rgba(0, 0, 0, 0.1)'
borderDash	number[]	是的	*	[]
borderDashOffset	number	是的	*	0.0
borderJoinStyle	'round'|'bevel'|'miter'	是的	*	'miter'
borderWidth	number	是的	*	3
clip	number|object|false	*	*	undefined
cubicInterpolationMode	string	是的	*	'default'
data	object|object[]| number[]|string[]	*	*	required
drawActiveElementsOnTop	boolean	是的	是的	true
fill	boolean|string	是的	*	false
hoverBackgroundColor	Color	是的	*	undefined
hoverBorderCapStyle	string	是的	*	undefined
hoverBorderColor	Color	是的	*	undefined
hoverBorderDash	number[]	是的	*	undefined
hoverBorderDashOffset	number	是的	*	undefined
hoverBorderJoinStyle	'round'|'bevel'|'miter'	是的	*	undefined
hoverBorderWidth	number	是的	*	undefined
indexAxis	string	*	*	'x'
label	string	*	*	''
order	number	*	*	0
pointBackgroundColor	Color	是的	是的	'rgba(0, 0, 0, 0.1)'
pointBorderColor	Color	是的	是的	'rgba(0, 0, 0, 0.1)'
pointBorderWidth	number	是的	是的	1
pointHitRadius	number	是的	是的	1
pointHoverBackgroundColor	Color	是的	是的	undefined
pointHoverBorderColor	Color	是的	是的	undefined
pointHoverBorderWidth	number	是的	是的	1
pointHoverRadius	number	是的	是的	4
pointRadius	number	是的	是的	3
pointRotation	number	是的	是的	0
pointStyle	pointStyle	是的	是的	'circle'
segment	object	*	*	undefined
showLine	boolean	*	*	true
spanGaps	boolean|number	*	*	undefined
stack	string	*	*	'line'
stepped	boolean|string	*	*	false
tension	number	*	*	0
xAxisID	string	*	*	第一个 x 轴
yAxisID	string	*	*	第一个 y 轴

所有这些值，如果 undefined，回退到 选项决议 中描述的范围

¥All these values, if undefined, fallback to the scopes described in option resolution

一般的

¥General

名称	描述
clip	如何相对于 chartArea 进行裁剪。正值允许溢出，负值会限制 chartArea 内的许多像素。0 = 在图表区域剪辑。裁剪也可以每边配置：clip: {left: 5, top: false, right: -2, bottom: 0}
drawActiveElementsOnTop	在数据集的其他点上绘制数据集的活动点
indexAxis	数据集的基轴。'x' 用于水平线，'y' 用于垂直线。
label	出现在图例和工具提示中的数据集标签。
order	数据集的绘制顺序。还会影响堆叠、工具提示和图例的顺序。more
stack	此数据集所属组的 ID（堆叠时，每个组将是一个单独的堆栈）。more
xAxisID	绘制此数据集的 x 轴的 ID。
yAxisID	用于绘制此数据集的 y 轴的 ID。

点样式

¥Point Styling

可以使用以下属性控制每个点的样式：

¥The style of each point can be controlled with the following properties:

名称	描述
pointBackgroundColor	点的填充颜色。
pointBorderColor	点的边框颜色。
pointBorderWidth	点边框的宽度（以像素为单位）。
pointHitRadius	响应鼠标事件的非显示点的像素大小。
pointRadius	点形状的半径。如果设置为 0，则不渲染该点。
pointRotation	点的旋转度数。
pointStyle	点的样式。更多...

所有这些值，如果是 undefined，首先回退到数据集选项，然后是关联的 elements.point.* 选项。

¥All these values, if undefined, fallback first to the dataset options then to the associated elements.point.* options.

折线样式

¥Line Styling

可以使用以下属性控制线的样式：

¥The style of the line can be controlled with the following properties:

名称	描述
backgroundColor	线条填充颜色。
borderCapStyle	线帽样式。见 MDN (opens new window)。
borderColor	线条颜色。
borderDash	破折号的长度和间距。见 MDN (opens new window)。
borderDashOffset	虚线的偏移量。见 MDN (opens new window)。
borderJoinStyle	线联合样式。见 MDN (opens new window)。
borderWidth	线宽（以像素为单位）。
fill	如何填充线下的区域。见 面积图。
tension	线的贝塞尔曲线张力。设置为 0 以绘制直线。如果使用单调三次插值，则忽略此选项。
showLine	如果为 false，则不会为此数据集绘制线条。
spanGaps	如果为真，则将在没有数据或数据为空的点之间绘制线条。如果为 false，具有 null 数据的点将在线条中创建一个中断。也可以是指定要跨越的最大间隙长度的数字。值的单位取决于使用的比例。

如果值为 undefined，则值回退到关联的 elements.line.* 选项。

¥If the value is undefined, the values fallback to the associated elements.line.* options.

交互

¥Interactions

可以使用以下属性控制与每个点的交互：

¥The interaction with each point can be controlled with the following properties:

名称	描述
pointHoverBackgroundColor	悬停时点背景颜色。
pointHoverBorderColor	悬停时点边框颜色。
pointHoverBorderWidth	悬停时点的边框宽度。
pointHoverRadius	悬停时点的半径。

cubicInterpolationMode

支持以下插值模式。

¥The following interpolation modes are supported.

• 'default'

• 'monotone'

'default' 算法使用自定义加权三次插值，可为所有类型的数据集生成令人愉悦的曲线。

¥The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.

'monotone' 算法更适合 y = f(x) 数据集：它保留了被插值数据集的单调性（或分段单调性），并确保局部极值（如果有）留在输入数据点。

¥The 'monotone' algorithm is more suited to y = f(x) datasets: it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.

如果保持不变 (undefined)，则使用全局 options.elements.line.cubicInterpolationMode 属性。

¥If left untouched (undefined), the global options.elements.line.cubicInterpolationMode property is used.

片段

¥Segment

segment 对象中的可编写脚本的选项可以覆盖线段样式。目前，支持所有 border* 和 backgroundColor 选项。为每个点之间的线的每个部分解析线段样式。undefined 回退到主线样式。

¥Line segment styles can be overridden by scriptable options in the segment object. Currently, all of the border* and backgroundColor options are supported. The segment styles are resolved for each section of the line between each point. undefined fallbacks to main line styles.

提示

为了能够设置间隙样式，你需要启用 spanGaps 选项。

¥To be able to style gaps, you need the spanGaps option enabled.

可编写脚本的段的上下文包含以下属性：

¥Context for the scriptable segment contains the following properties:

• type：'segment'

• p0：第一点元素

  ¥p0: first point element

• p1：第二点元素

  ¥p1: second point element

• p0DataIndex：数据数组中第一个点的索引

  ¥p0DataIndex: index of first point in the data array

• p1DataIndex：数据数组中第二个点的索引

  ¥p1DataIndex: index of second point in the data array

• datasetIndex：数据集索引

  ¥datasetIndex: dataset index

用法示例

¥Example usage

阶梯式

¥Stepped

stepped 支持以下值。

¥The following values are supported for stepped.

• false：无步进插值（默认）

  ¥false: No Step Interpolation (default)

• true：插值前步（eq. 'before'）

  ¥true: Step-before Interpolation (eq. 'before')

• 'before'：插值前步进

  ¥'before': Step-before Interpolation

• 'after'：步进插值后

  ¥'after': Step-after Interpolation

• 'middle'：步进中间插值

  ¥'middle': Step-middle Interpolation

如果 stepped 值设置为 false 以外的任何值，则 tension 将被忽略。

¥If the stepped value is set to anything other than false, tension will be ignored.

默认选项

¥Default Options

通常希望将配置设置应用于所有创建的折线图。全局折线图设置存储在 Chart.overrides.line 中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

¥It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in Chart.overrides.line. Changing the global options only affects charts created after the change. Existing charts are not changed.

例如，要使用 spanGaps = true 配置所有折线图，你可以执行以下操作：

¥For example, to configure all line charts with spanGaps = true you would do:

Chart.overrides.line.spanGaps = true;

数据结构

¥Data Structure

所有支持的 数据结构 都可以与折线图一起使用。

¥All the supported data structures can be used with line charts.

堆叠面积图

¥Stacked Area Chart

通过更改 y 轴上的设置以启用堆叠，可以将折线图配置为堆叠面积图。堆积面积图可用于显示一个数据趋势如何由许多较小的部分组成。

¥Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.

const stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                stacked: true
            }
        }
    }
});

垂直折线图

¥Vertical Line Chart

垂直折线图是水平折线图的变体。为此，你必须将选项对象中的 indexAxis 属性设置为 'y'。此属性的默认值为 'x'，因此将显示水平线。

¥A vertical line chart is a variation on the horizontal line chart. To achieve this, you will have to set the indexAxis property in the options object to 'y'. The default for this property is 'x' and thus will show horizontal lines.

const config = { type: 'line', data: data, options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } } };

const config = {
  type: 'line',
  data: data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ axis: 'y', 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 }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    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
  }]
};

配置选项

¥Config Options

垂直折线图的配置选项与 折线图 相同。但是，在折线图中的 x 轴上指定的任何选项都将应用于垂直折线图中的 y 轴。

¥The configuration options for the vertical line chart are the same as for the line chart. However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart.

内部数据格式

¥Internal data format

{x, y}