Chart.js 3.x+：根据数值动态渲染折线图颜色与填充-js教程-PHP中文网

Chart.js 3.x+：根据数值动态渲染折线图颜色与填充

花韻仙語

发布： 2025-11-23 16:11:00

原创

416人浏览过

Chart.js 3.x+：根据数值动态渲染折线图颜色与填充

本文详细介绍了在 chart.js 3.x 及更高版本中，如何根据数据点的数值动态改变折线图的颜色和填充。我们将探讨两种主要方法：一是利用 chart.js 内置的 `segment` 属性实现线段分段着色，适用于根据阈值进行离散颜色区分；二是借助 `chartjs-plugin-gradient` 插件实现更复杂的渐变色填充效果，提供平滑的颜色过渡。

引言

在数据可视化中，根据数值大小为图表元素赋予不同的颜色，能够显著提升数据的可读性和洞察力。对于 Chart.js 折线图而言，当我们需要根据数据点的正负、大小范围等条件来动态改变线条颜色、填充背景色或数据点标记颜色时，Chart.js 3.x 版本及其后续版本提供了一些强大的新特性和扩展方式。本文将深入探讨两种实用的方法，帮助开发者实现这一需求。

一、基于数值的线段分段着色

Chart.js 3.x 引入了 segment 属性，允许开发者为折线图的每个线段（即两个数据点之间的连接线）定义独立的样式。这使得根据线段两端点的值来动态设置颜色成为可能。同时，我们也可以独立设置数据点（markers）的颜色。

1. 线段颜色与背景色设置

segment 属性可以接收一个对象，其中包含 borderColor 和 backgroundColor 属性。这些属性可以是一个函数，该函数会在渲染每个线段时被调用，并传入一个 part 对象作为参数。part 对象包含了当前线段的起始点 (p0) 和结束点 (p1) 的详细信息，包括其解析后的数值 (parsed.y)。

关键属性：

segment.borderColor: 定义线段的边框颜色。
segment.backgroundColor: 定义线段的填充背景色（需要将 fill 属性设置为 true）。
part.p0.parsed.y: 线段起始点的 Y 轴解析值。
part.p1.parsed.y: 线段结束点的 Y 轴解析值。

示例代码：

以下示例展示了如何根据线段两端点的值是否小于0来决定线段的颜色（红色表示负值，绿色表示正值）。

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js 线段分段着色</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    canvas {
      max-width: 800px;
      margin: 20px auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="mySegmentChart"></canvas>

  <script>
    const ctx = document.getElementById("mySegmentChart").getContext("2d");
    const dataValues = [10, 20, 0, -10, -20, 0, 5]; // 示例数据

    // 根据数据点的值预定义颜色数组，用于数据点标记
    const pointColors = dataValues.map((value) => value < 0 ? 'red' : 'green');

    const chart = new Chart(ctx, {
      type: "line",
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [{
          label: "示例数据集",
          data: dataValues,
          fill: true, // 启用背景填充，以便backgroundColor生效

          // 根据线段值动态设置边框和背景颜色
          segment: {
            borderColor: (part) => {
              const prevValue = part.p0.parsed.y; // 线段起始值
              const nextValue = part.p1.parsed.y; // 线段结束值
              // 如果线段任一端点为负，则线段为红色，否则为绿色
              return prevValue < 0 || nextValue < 0 ? "red" : "green";
            },
            backgroundColor: (part) => {
              const prevValue = part.p0.parsed.y; // 线段起始值
              const nextValue = part.p1.parsed.y; // 线段结束值
              // 如果线段任一端点为负，则背景为红色，否则为绿色
              return prevValue < 0 || nextValue < 0 ? "red" : "green";
            },
          },

          // 根据数据点值动态设置数据点标记的边框和背景颜色
          pointBorderColor: pointColors,
          pointBackgroundColor: pointColors,
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            ticks: {
              beginAtZero: true // Y轴从0开始
            }
          }
        }
      },
    });
  </script>
</body>
</html>

登录后复制

2. 数据点标记颜色设置

除了线段颜色，我们还可以通过 pointBorderColor 和 pointBackgroundColor 属性来设置数据点标记的颜色。这些属性可以直接接收一个颜色数组，数组的每个元素对应一个数据点的颜色。

在上面的示例中，我们通过 dataValues.map((value) => value < 0 ? 'red' : 'green') 提前生成了一个颜色数组 pointColors，并将其赋值给 pointBorderColor 和 pointBackgroundColor。

二、使用 chartjs-plugin-gradient 实现渐变色填充

对于需要更平滑、更复杂的渐变色效果，尤其是在背景填充或线条本身需要渐变时，Chart.js 官方推荐使用第三方插件 chartjs-plugin-gradient。这个插件在 Chart.js 3.x+ 版本中表现出色，能够轻松实现基于数值或轴向的渐变。

1. 插件安装与引入

首先，你需要通过 CDN 引入该插件，或者通过 npm/yarn 进行安装：

课游记AI

AI原生学习产品

查看详情

通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient#.js"></script>

登录后复制

通过 npm/yarn 安装：

npm install chartjs-plugin-gradient
# 或者
yarn add chartjs-plugin-gradient

登录后复制

然后在你的 JavaScript 文件中导入：

import gradient from 'chartjs-plugin-gradient';
// 注册插件
Chart.register(gradient);

登录后复制

如果通过CDN引入，插件会自动注册到全局 window['chartjs-plugin-gradient']。

2. 配置渐变效果

引入插件后，你可以在数据集配置中添加 gradient 属性来定义渐变效果。gradient 属性可以包含 backgroundColor 和 borderColor，分别用于背景填充和线条本身的渐变。

关键属性：

gradient.backgroundColor: 定义背景填充的渐变。
gradient.borderColor: 定义线条的渐变。
axis: 定义渐变的方向，可以是 'x' 或 'y'。
colors: 一个对象，键是数值，值是对应的颜色。插件会根据这些数值和颜色自动生成渐变。

示例代码：

以下示例展示了如何使用 chartjs-plugin-gradient 实现基于 Y 轴数值的渐变背景和线条颜色。

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js 渐变色填充</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- 引入 chartjs-plugin-gradient 插件 -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient#.js"></script>
  <style>
    canvas {
      max-width: 800px;
      margin: 20px auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="myGradientChart"></canvas>

  <script>
    const ctx = document.getElementById("myGradientChart").getContext("2d");
    // 如果通过 CDN 引入，插件对象通常在 window['chartjs-plugin-gradient']
    const gradientPlugin = window['chartjs-plugin-gradient']; 

    const chart = new Chart(ctx, {
      type: "line",
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
        datasets: [{
          label: "示例数据集",
          data: [0, 1, 4, 16, 64],
          fill: true, // 启用背景填充，渐变背景色才生效

          // 配置渐变效果
          gradient: {
            // 背景渐变（需要fill: true）
            backgroundColor: {
              axis: 'y', // 沿 Y 轴方向渐变
              colors: {
                0: 'red',    // Y 值为 0 时为红色
                4: 'yellow', // Y 值为 4 时为黄色
                20: 'green'  // Y 值为 20 时为绿色
              }
            },
            // 线条渐变
            borderColor: {
              axis: 'y', // 沿 Y 轴方向渐变
              colors: {
                0: 'red',
                4: 'yellow',
                20: 'green'
              }
            }
          }
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            ticks: {
              beginAtZero: true
            }
          }
        }
      },
      plugins: [gradientPlugin] // 注册并使用 chartjs-plugin-gradient 插件
    });
  </script>
</body>
</html>

登录后复制

注意事项与总结

Chart.js 版本兼容性：本文介绍的两种方法主要适用于 Chart.js 3.x 及更高版本。旧版本（如 2.x）的 API 可能有所不同，特别是 _meta 属性的直接访问在 3.x 中已被弃用或修改。
特定数据集应用：如果你只想对图表中的某个特定数据集应用颜色规则，只需在相应数据集的配置对象中添加 segment 或 gradient 属性即可。在上面的示例中，我们只配置了一个数据集。
fill: true 的重要性：无论是使用 segment.backgroundColor 还是 gradient.backgroundColor，都必须将数据集的 fill 属性设置为 true，背景填充效果才能生效。
选择合适的方案：
- 线段分段着色 (segment)：适用于根据明确的阈值（如正负、特定区间）将线条或背景划分为离散颜色区域的场景。它不需要额外插件，是 Chart.js 内置功能。
- 渐变插件 (chartjs-plugin-gradient)：适用于需要平滑过渡的渐变效果，尤其是在背景或线条本身需要多色渐变时。它提供了更丰富的渐变配置选项，但需要引入第三方插件。