如何为Chart.js绘制的折线图设置渐变线条？

我尝试使用Chart.js实现图中的折线图，但未找到设置折线分段颜色的方法。我希望折线上升段使用颜色rgba(249, 65, 68, 1)，下降段使用颜色rgba(51, 51, 51, 1)。

原实现代码：

document.addEventListener("DOMContentLoaded", function () {

    var dataValues = [18, 20, 18, 15, 12, 8, 11, 22];

    var data = {
        labels: Array.from({ length: dataValues.length }, (_, index) => ""),
        datasets: [
            {
                label: "",
                borderColor: "rgba(249, 65, 68, 1)",
                data: dataValues,
                pointBackgroundColor: "rgba(249, 65, 68, 1)",
                fill: false,
            },
        ],
    };

    var ctx = document.getElementById("timeChart").getContext("2d");
    var myLineChart = new Chart(ctx, {
        type: "line",
        data: data,
        options: {
            datasetFill: true,
            showTooltips: false,
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: false,
                },
            },
        },
    });
});

Chart.js 3.x及以上版本支持通过segment配置项给折线的每一段单独设置样式，你可以用回调函数判断相邻数据点的变化趋势，动态返回对应颜色：

1. 在数据集里添加segment配置，通过borderColor回调判断当前线段是升还是降：
   • 当前点数值比前一个大，返回红色（上升段）
   • 当前点数值比前一个小，返回深灰色（下降段）
2. 同步调整点的背景色，让点和对应线段颜色匹配

修改后的完整代码：

document.addEventListener("DOMContentLoaded", function () {
    var dataValues = [18, 20, 18, 15, 12, 8, 11, 22];

    var data = {
        labels: Array.from({ length: dataValues.length }, (_, index) => ""),
        datasets: [
            {
                label: "",
                data: dataValues,
                fill: false,
                // 配置每段折线的颜色
                segment: {
                    borderColor: function(context) {
                        const prevValue = context.p0.parsed.y;
                        const currValue = context.p1.parsed.y;
                        // 对比前后点数值，返回对应颜色
                        return currValue > prevValue ? "rgba(249, 65, 68, 1)" : "rgba(51, 51, 51, 1)";
                    }
                },
                // 让点的颜色和线段匹配
                pointBackgroundColor: function(context) {
                    const index = context.dataIndex;
                    // 第一个点取右侧线段颜色，其他点取左侧线段颜色
                    if (index === 0) {
                        return dataValues[1] > dataValues[0] ? "rgba(249, 65, 68, 1)" : "rgba(51, 51, 51, 1)";
                    } else {
                        return dataValues[index] > dataValues[index - 1] ? "rgba(249, 65, 68, 1)" : "rgba(51, 51, 51, 1)";
                    }
                }
            },
        ],
    };

    var ctx = document.getElementById("timeChart").getContext("2d");
    var myLineChart = new Chart(ctx, {
        type: "line",
        data: data,
        options: {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    enabled: false // 替代原来的showTooltips，V3版本用这个配置
                }
            },
            // 原代码里的datasetFill是旧版本配置，V3已经废弃不用了
        },
    });
});

注意点： #

• segment.borderColor的回调函数中，context.p0是线段起点，context.p1是终点，对比两者的y值即可判断趋势
• 点的颜色通过pointBackgroundColor回调调整，保证视觉统一
• 原代码中的datasetFill和showTooltips是Chart.js旧版本配置，V3已废弃，替换为tooltip.enabled

内容的提问来源于stack exchange，提问作者ckot