Chart.js

# 折线图

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

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

# 数据集属性

命名空间

  • data.datasets[index] - 仅适用于此数据集的选项
  • options.datasets.line - 适用于所有折线数据集的选项
  • options.elements.line - 适用于所有 折线元素 的选项
  • options.elements.point - 适用于所有 点元素 的选项
  • options - 适用于整个图表的选项

折线图允许为每个数据集指定一些属性。这些属性用于设置特定数据集的显示属性。例如，线条的颜色通常以这种方式设置。

名称 类型 可编写脚本的 可索引的 默认值
backgroundColor 颜色 是 - 'rgba(0, 0, 0, 0.1)'
borderCapStyle 字符串 是 - 'butt'
borderColor 颜色 是 - 'rgba(0, 0, 0, 0.1)'
borderDash number[] 是 - []
borderDashOffset 数字 是 - 0.0
borderJoinStyle 'round'|'bevel'|'miter' 是 - 'miter'
borderWidth 数字 是 - 3
clip 数字|对象|false - - undefined
cubicInterpolationMode 字符串 是 - 'default'
data 对象|对象[]| 数字[]|字符串[] - - 必需
drawActiveElementsOnTop 布尔值 是 是 true
fill 布尔值|字符串 是 - false
hoverBackgroundColor 颜色 是 - undefined
hoverBorderCapStyle 字符串 是 - undefined
hoverBorderColor 颜色 是 - undefined
hoverBorderDash number[] 是 - undefined
hoverBorderDashOffset 数字 是 - undefined
hoverBorderJoinStyle 'round'|'bevel'|'miter' 是 - undefined
hoverBorderWidth 数字 是 - undefined
indexAxis 字符串 - - 'x'
label 字符串 - - ''
order 数字 - - 0
pointBackgroundColor 颜色 是 是 'rgba(0, 0, 0, 0.1)'
pointBorderColor 颜色 是 是 'rgba(0, 0, 0, 0.1)'
pointBorderWidth 数字 是 是 1
pointHitRadius 数字 是 是 1
pointHoverBackgroundColor 颜色 是 是 undefined
pointHoverBorderColor 颜色 是 是 undefined
pointHoverBorderWidth 数字 是 是 1
pointHoverRadius 数字 是 是 4
pointRadius 数字 是 是 3
pointRotation 数字 是 是 0
pointStyle pointStyle 是 是 'circle'
segment 对象 - - undefined
showLine 布尔值 - - true
spanGaps 布尔值|数字 - - undefined
stack 字符串 - - 'line'
stepped 布尔值|字符串 - - false
tension 数字 - - 0
xAxisID 字符串 - - 第一个 x 轴
yAxisID 字符串 - - 第一个 y 轴

所有这些值，如果为 undefined，则回退到 选项解析 中描述的范围

# 常规

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

# 点样式

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

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

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

# 线条样式

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

名称 描述
backgroundColor 线条的填充颜色。
borderCapStyle 线条的端点样式。请参阅 MDN (在新窗口中打开)。
borderColor 线条的颜色。
borderDash 破折线的长度和间距。请参阅 MDN (在新窗口中打开)。
borderDashOffset 线条破折线的偏移量。请参阅 MDN (在新窗口中打开)。
borderJoinStyle 线条连接样式。请参阅 MDN (在新窗口中打开)。
borderWidth 线条宽度（以像素为单位）。
fill 如何填充线条下方的区域。请参阅 面积图。
tension 线条的贝塞尔曲线张力。设置为 0 以绘制直线。如果使用单调三次插值，则忽略此选项。
showLine 如果为 false，则不为此数据集绘制线条。
spanGaps 如果为 true，则在没有数据或数据为 null 的点之间绘制线条。如果为 false，则数据为 null 的点将在线条中产生断裂。也可以是指定要跨越的最大间隙长度的数字。该值的单位取决于所用刻度的单位。

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

# 交互

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

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

# cubicInterpolationMode

支持以下插值模式。

  • 'default'
  • 'monotone'

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

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

如果保持原样（undefined），则使用全局 options.elements.line.cubicInterpolationMode 属性。

# 段

可以使用 segment 对象中的可编写脚本的选项覆盖线段样式。目前，所有 border* 和 backgroundColor 选项都受支持。线段样式将针对每个点之间的每个线段进行解析。undefined 回退到主线条样式。

提示

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

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

  • type: 'segment'
  • p0: 第一个点元素
  • p1: 第二个点元素
  • p0DataIndex: 数据数组中第一个点的索引
  • p1DataIndex: 数据数组中第二个点的索引
  • datasetIndex: 数据集索引

示例用法

# 阶梯型

stepped 支持以下值。

  • false: 无步长插值（默认）
  • true: 步长前插值（等效于 'before'）
  • 'before': 步长前插值
  • 'after': 步长后插值
  • 'middle': 步长中间插值

如果 stepped 值设置为除 false 之外的任何值，则会忽略 tension。

# 默认选项

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

例如，要将所有折线图配置为 spanGaps = true，您需要执行以下操作

Chart.overrides.line.spanGaps = true;

# 数据结构

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

# 堆叠面积图

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

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

# 垂直折线图

垂直折线图是水平折线图的一种变体。要实现这一点，您需要将选项对象中的 indexAxis 属性设置为 'y'。此属性的默认值为 'x'，因此将显示水平线。

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

# 配置选项

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

# 内部数据格式

{x, y}

上次更新: 2024年5月17日 下午12:33:38

← 混合图表类型 →