Chart.js 3.x+ 折线图按值着色：分段、点及渐变实现

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Chart.js 3.x+ 折线图按值着色：分段、点及渐变实现

2025-11-23

浏览次数：次

返回列表

chart.js 3.x+ 折线图按值着色：分段、点及渐变实现

本教程详细介绍了在 Chart.js 3.x 及更高版本中，如何根据数据值动态改变折线图的颜色。文章将探讨两种主要方法：一是利用 Chart.js 内置的 `segment` 和 `point` 属性实现分段或逐点条件着色；二是借助 `chartjs-plugin-gradient` 插件实现更复杂的基于数值的渐变填充效果。通过具体代码示例，帮助读者掌握不同场景下的折线图颜色定制技巧。

在 Chart.js 3.x 及更高版本中，图表的内部结构和 API 发生了显著变化，例如直接访问 _meta 属性的方式已不再适用。然而，Chart.js 提供了更灵活和现代化的方法来实现基于数值的折线图颜色动态调整，包括对线条分段、数据点以及整个区域进行条件着色或渐变填充。本教程将详细介绍两种主流实现方案。

一、利用 Chart.js 内置属性实现分段与逐点条件着色

Chart.js 3.x 引入了 segment 和 point 选项，允许开发者根据数据点的具体值或线段两端的值来动态设置颜色。这种方法非常适合根据预设规则（例如正值/负值）来区分图表的不同部分。

1.1 分段着色

通过配置 dataset 中的 segment.borderColor 和 segment.backgroundColor 属性，我们可以为折线图的每个线段定义不同的边框或背景颜色。这两个属性接受一个函数作为参数，该函数会在每个线段渲染时被调用，并传入一个 part 对象，其中包含 p0 和 p1 两个属性，分别代表线段的起始点和结束点的数据信息。通过访问 part.p0.parsed.y 和 part.p1.parsed.y，我们可以获取到线段两端的 Y 轴数值，从而实现条件判断。

关键配置：

segment.borderColor: 定义线段的边框颜色。
segment.backgroundColor: 当 fill: true 时，定义线段下方的填充区域颜色。

1.2 逐点着色

除了线段着色，我们还可以为每个数据点单独设置边框和背景颜色。这通过 pointBorderColor 和 pointBackgroundColor 属性实现。这两个属性可以接受一个颜色数组，数组的每个元素对应数据集中的一个数据点的颜色。

关键配置：

pointBorderColor: 定义数据点的边框颜色。
pointBackgroundColor: 定义数据点的背景颜色。

1.3 示例代码

以下示例展示了如何结合分段和逐点着色，实现当数值小于 0 时显示红色，否则显示绿色的效果。

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js 分段与逐点着色</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 700px;">
        <canvas id="myChart"></canvas>
    </div>

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

        // 根据数据值生成颜色数组，用于数据点着色
        const pointColors = data.map((value) => value < 0 ? 'red' : 'green');

        const chart = new Chart(ctx, {
            type: "line",
            data: {
                labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                datasets: [{
                    label: "示例数据集",
                    data: data,
                    fill: true, // 启用填充，以便 backgroundColor 生效
                    segment: {
                        // 根据线段两端值进行边框着色
                        borderColor: (part) => {
                            const prevValue = part.p0.parsed.y; // 线段起始点Y值
                            const nextValue = part.p1.parsed.y; // 线段结束点Y值
                            // 如果线段任一端点值小于0，则为红色，否则为绿色
                            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>

注意事项：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

segment.backgroundColor 只有在 dataset 的 fill 属性设置为 true 时才会生效。
part.p0.parsed.y 和 part.p1.parsed.y 获取的是经过解析的 Y 轴数值，适用于大多数情况。
此方法适用于为特定数据集（通过 datasets 数组索引指定）应用颜色规则。

二、使用 chartjs-plugin-gradient 实现数值渐变效果

对于更复杂的、基于数值范围的渐变填充需求，Chart.js 官方并没有直接提供内置的解决方案。此时，我们可以借助第三方插件 chartjs-plugin-gradient 来实现。该插件允许你根据数据值在图表的 X 或 Y 轴上创建平滑的渐变效果。

2.1 插件介绍与安装

chartjs-plugin-gradient 是一个 Chart.js 插件，专门用于处理基于数值的渐变颜色。

安装方式：

npm: npm install chartjs-plugin-gradient
CDN: 直接通过 <script> 标签引入。</script>

2.2 配置与使用

引入插件后，需要在 Chart.js 实例的 plugins 数组中注册它。然后，在数据集配置中，你可以使用 gradient 属性来定义渐变规则。

关键配置：

gradient.backgroundColor: 定义填充区域的渐变颜色（需要 fill: true）。
gradient.borderColor: 定义线条的渐变颜色。
axis: 指定渐变轴向，可以是 'x' 或 'y'。
colors: 一个对象，键是数值，值是对应的颜色（例如 0: 'red', 20: 'green' 表示从值 0 的红色渐变到值 20 的绿色）。

2.3 示例代码

以下示例展示了如何使用 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"></script>
</head>
<body>
    <div style="width: 700px;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        const ctx = document.getElementById("myChart").getContext("2d");

        // 获取插件实例，如果通过CDN引入，通常挂载在 window 对象上
        const gradientPlugin = window['chartjs-plugin-gradient'];

        const chart = new Chart(ctx, {
            type: "line",
            data: {
                labels: ["一月", "二月", "三月", "四月", "五月"],
                datasets: [{
                    label: "示例数据集",
                    data: [0, 1, 4, 16, 64],
                    fill: true, // 启用填充，以便 backgroundColor 渐变生效
                    gradient: {
                        // 配置背景填充渐变
                        backgroundColor: {
                            axis: 'y', // 沿 Y 轴渐变
                            colors: {
                                // 定义不同数值对应的颜色
                                0: 'red',    // 值 0 对应红色
                                4: 'yellow', // 值 4 对应黄色
                                20: 'green'  // 值 20 对应绿色
                            }
                        },
                        // 配置线条边框渐变
                        borderColor: {
                            axis: 'y', // 沿 Y 轴渐变
                            colors: {
                                0: 'red',
                                4: 'yellow',
                                20: 'green'
                            }
                        }
                    }
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        }
                    }
                }
            },
            // 在 Chart.js 实例中注册插件
            plugins: [gradientPlugin]
        });
    </script>
</body>
</html>

注意事项：

确保正确引入 chartjs-plugin-gradient 插件，并通过 plugins: [gradientPlugin] 在 Chart.js 实例中注册。
gradient.backgroundColor 同样需要 fill: true 才能生效。
colors 对象中的键（数值）应按升序排列，插件会根据这些定义在数值之间进行平滑插值。

总结

在 Chart.js 3.x 及更高版本中，实现折线图根据数值动态着色具有多种灵活的方法。对于简单的条件判断和逐点着色，可以直接利用 segment 和 point 属性，它们提供了强大的内置功能。而当需要实现更复杂的、基于数值范围的平滑渐变效果时，chartjs-plugin-gradient 插件则是一个高效且易于使用的解决方案。开发者可以根据具体需求和图表复杂度，选择最适合的方案来增强数据可视化效果。

以上就是Chart.js 3.x+ 折线图按值着色：分段、点及渐变实现的详细内容，更多请关注其它相关文章！

# 适用于 # seo引流有什么作用 # 拼多多新品营销推广策略 # 各类福州seo渠道分析 # 绥化seo查询获客软件 # 揭阳seo整站优化外包 # 西藏seo技巧多少钱 # 兴庆区网站建设设计招标 # 推广手机营销文案范文 # 贵州铁路建设网站 # 黑河手机全网营销推广 # 则为 # 来实现 # 详细介绍 # 这两个 # html # 遍历 # 两种 # 更高 # 我们可以 # 折线图 # red # canva # .net # 排列 # 数据可视化 # cdn # win # npm # js