如何在ChartJS中为新增点动态设置独立的PointBackgroundColor？

问题描述 #

• 需求：点击「Add 10」按钮时，新增的点使用绿色pointBackgroundColor；点击「Subtract 10」按钮时，新增的点使用红色pointBackgroundColor。
• 当前问题：执行按钮操作时，所有点的背景色会一同改变，而非仅修改新增点的颜色。

原代码 #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing Chart.js Line Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1+190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <button type="button" onclick="add()" id="btnAdd">Add 10</button>
    <button type="button" onclick="subtract()" id="btnSubtract">Subtract 10</button>
    <canvas id="chart_canvas">Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript">

    // Set Chart Global Variables
    let x_values = [];
    let y_values = [];
    let new_number = 0;
    let index = 0;
    let chart_canvas = document.getElementById("chart_canvas");

    // Intialize Data
    x_values.push(index);
    y_values.push(index);

    // Create New Chart
    my_chart = new Chart(chart_canvas, {
        type: "line",
        data: {
            labels: [x_values[index]],
            datasets: [{
                backgroundColor: "#d8dee980",
                pointBackgroundColor: "#81a1c1ff",
                fill: true,
                pointStyle: "circle",
                label: "Values",
                data: [y_values[index]]
            }]
        }
    });

    // ------ Local Functions ------

    function add() {
        index = my_chart.data.datasets.length;
        new_number += 10;
        my_chart.data.labels.push(index);
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        my_chart.data.datasets[index - 1].pointBackgroundColor = "#88c0d0ff";
        // -------

        my_chart.update();

    }

    function subtract() {
        index = my_chart.data.datasets.length;
        new_number -= 10;
        my_chart.data.labels.push(index);
        my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
        });

        // -------
        //The below line is changing all point background colors instead of the last one only!
        my_chart.data.datasets[index - 1].pointBackgroundColor = "#bf616aff";
        // -------

        my_chart.update();
    }
    </script>
</body>

</html>

解决方案 #

问题核心在于pointBackgroundColor的赋值逻辑：当给它设置单一颜色值时，ChartJS会将该颜色统一应用到所有点。要实现每个点独立颜色，需将pointBackgroundColor定义为数组，数组元素与数据点一一对应。

修改后的代码 #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing Chart.js Line Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1+190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <button type="button" onclick="add()" id="btnAdd">Add 10</button>
    <button type="button" onclick="subtract()" id="btnSubtract">Subtract 10</button>
    <canvas id="chart_canvas">Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript">

    // Set Chart Global Variables
    let new_number = 0;
    let chart_canvas = document.getElementById("chart_canvas");

    // Create New Chart
    my_chart = new Chart(chart_canvas, {
        type: "line",
        data: {
            labels: [0],
            datasets: [{
                backgroundColor: "#d8dee980",
                // 初始化时用数组存储第一个点的颜色
                pointBackgroundColor: ["#81a1c1ff"],
                fill: true,
                pointStyle: "circle",
                label: "Values",
                data: [0]
            }]
        }
    });

    // ------ Local Functions ------

    function add() {
        new_number += 10;
        // 新增label为当前labels数组的长度（保证递增）
        my_chart.data.labels.push(my_chart.data.labels.length);
        // 新增数据点
        my_chart.data.datasets[0].data.push(new_number);
        // 给新增点添加绿色背景色
        my_chart.data.datasets[0].pointBackgroundColor.push("#88c0d0ff");
        
        my_chart.update();
    }

    function subtract() {
        new_number -= 10;
        my_chart.data.labels.push(my_chart.data.labels.length);
        my_chart.data.datasets[0].data.push(new_number);
        // 给新增点添加红色背景色
        my_chart.data.datasets[0].pointBackgroundColor.push("#bf616aff");
        
        my_chart.update();
    }
    </script>
</body>

</html>

关键修改点 #

1. 初始化颜色数组：将pointBackgroundColor初始化为数组["#81a1c1ff"]，对应第一个点的颜色。
2. 新增颜色元素：在add和subtract函数中，使用push方法向颜色数组添加新元素，而非替换整个数组，确保仅新增点的颜色被修改。
3. 简化label逻辑：直接用当前labels数组的长度作为新增label值，避免多余变量混淆。

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