如何在ChartJS中动态改变点背景颜色？

busg9geu 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(246)

<!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>

预期产出/目标：

当点击“添加10”按钮时，需要添加一个新的点条目，其中pointBackgroundColor为绿色。
当点击“减10”按钮时，需要添加一个新的点条目，并带有红色的PointBackgroundColor。
当前结果：

所有点的背景颜色会一起变更，而非仅变更最后一个点的背景颜色。

chart.js

来源：https://stackoverflow.com/questions/73017804/how-to-change-the-pointbackgroundcolor-dynamically-in-chartjs

1条答案

按热度按时间

g9icjywg1#

如果您希望缐条中的不同点有不同的色彩，则它应该是数组。

pointBackgroundColor:["#88c0d0ff"]

当你添加一个新的点，然后推所需的颜色在上述数组。

my_chart.data.datasets.forEach((dataset) => {
            dataset.data.push(new_number);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#88c0d0ff");
        });

<!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:["#88c0d0ff"],//Make it an array.
                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);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#88c0d0ff");
        });

        // -------
        //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);
            //New dot is pushed with desired color.
            dataset.pointBackgroundColor.push("#bf616aff");
        });

        // -------
        //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>

赞(0）回复(0）举报 2022-11-06

我来回答

如何在ChartJS中动态改变点背景颜色？

1条答案

相关问题

热门标签

最新问答