Обновлять диаграмму js диаграмму со случайными данными один раз в секунду - PullRequest
Новая
       2

Обновлять диаграмму js диаграмму со случайными данными один раз в секунду

0 голосов
/ 25 мая 2020

Ниже представлена ​​моя попытка обновлять диаграмму один раз в секунду случайными данными и динамически перерисовывать диаграмму. Функция adddata() помещает случайные данные в массив данных, но пользовательский интерфейс диаграммы не обновляется и отображается как c. Как динамически обновлять диаграмму при добавлении новых данных?

sr c: 

<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();

    });

fiddle sr c: https://jsfiddle.net/adrianfiddleuser/jq1pzkrs/6/

Функция вызывается раз в секунду, на консоли отображается следующее:

enter image description here

1 Ответ

0 голосов
/ 25 мая 2020

Прямо сейчас вы добавляете дополнительный слот в набор данных (вам нужно иметь такое же количество меток, что и данные в наборе данных, поэтому, если вы хотите добавить больше данных - также добавьте больше меток ) - попробуйте вместо этого заменить данные, например: 

    $(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>

Подробнее об этом можно прочитать в документации: https://www.chartjs.org/docs/latest/developers/updates.html

...