每秒更新一次随机数据中的chartjs图表

问题描述 投票：0回答：1

以下是我尝试使用随机数据每秒更新一次图表并动态重绘图表。函数adddata()将随机数据推送到数据数组，但图表UI并未更新，并且显示为静态。添加新数据后如何动态更新图表？

src：

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<div class="chart-container" style="position: absolute; height:20vh; width:40vw">
    <canvas id="myChart1"></canvas>
    <input onclick="adddata()" type="button" value="Add Data">
</div>


    $(document).ready(function () {

        var canvas1 = document.getElementById('myChart1');
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 5,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 0, 56, 55, 40],
                }
            ]
        };

        function adddata() {

            setInterval(function () {
                console.log('invoking' + Math.random() * 10)
                myLineChart.data.datasets[0].data.push(Math.floor(Math.random() * 10))
                myLineChart.update();
            }, 1000)

        }

        var option = {
            showLines: true
        };
        var myLineChart = Chart.Line(canvas1, {
            data: data,
            options: option
        });

adddata();

    });

小提琴来源：https://jsfiddle.net/adrianfiddleuser/jq1pzkrs/6/

该函数每秒调用一次，在控制台上将省去以下费用：

enter image description here

javascript jquery chart.js
1个回答
0
投票

现在，您要为数据集添加一个额外的插槽（您需要与数据集中的数据具有相同数量的标签，因此，如果要添加更多数据-也要添加更多标签）-请尝试替换数据，例如：

$(document).ready(function () { var canvas1 = document.getElementById('myChart1'); var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 5, pointHitRadius: 10, data: [65, 59, 80, 0, 56, 55, 40], } ] }; function adddata() { setInterval(function () { let randomIndex = Math.floor(Math.random() * Math.floor(myLineChart.data.datasets[0].data.length)); myLineChart.data.datasets[0].data[randomIndex] = Math.floor(Math.random() * 100); myLineChart.update(); }, 1000) } var myLineChart = Chart.Line(canvas1, { data: data, options: option }); var option = { showLines: true }; adddata(); });
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<div class="chart-container" style="position: absolute; height:20vh; width:40vw">
    <canvas id="myChart1"></canvas>
    <input onclick="adddata()" type="button" value="Add Data">
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.