Диаграмма JS Загрузка новых данных в один элемент - PullRequest
0 голосов
/ 23 апреля 2020

Я использую диаграмму js, и когда пользователь нажимает на кнопки, он загружает новые данные в один экземпляр диаграммы.

У меня есть один экземпляр диаграммы, и я пытаюсь динамически загружать в него различные наборы данных, когда пользователь нажимает кнопку, но он не возвращает желаемых результатов.

Он загружает только одну точку данных, и метки повсюду, любые идеи, что я делаю неправильно ...

<canvas id="myChartYearonYear"></canvas>


        $(".js-nav-click").click(function () {

            var chart;

            var id = $(this).data('id');


            var ctx = document.getElementById('myChartYearonYear').getContext('2d');

            $.getJSON("/data/GetData?Id=" + id, function (data) {

                for (var i = 0; i <= data.length - 1; i++) {
                        LabelsYearonYear.push(data[i].Label);

                        DataPointsYearonYearLastYear.push(parseInt(data[i].LastYearCount));
                        DataPointsYearonYearThisYear.push(parseInt(data[i].ThisYearCount));
                    }
                }

                chart = new Chart(ctx, {
                    // The type of chart we want to create
                    type: 'line',

                    // The data for our dataset
                    data: {
                        labels: LabelsYearonYear,
                        datasets: [

                            {
                                label:  '@(DateTime.Now.Year.ToString())',
                                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                                borderColor: 'rgba(255, 99, 132, 0.5)',
                                data: DataPointsYearonYearThisYear
                            },
                            {
                                label:  '@((DateTime.Now.Year - 1).ToString())',
                                backgroundColor: 'rgb(0,115,183)',
                                borderColor: 'rgb(0,115,183)',
                                data: DataPointsYearonYearLastYear
                            }

                        ]

                    },

                    // Configuration options go here
                    options: {}
                });

                removeData(chart);
                addData(chart, LabelsYearonYear, DataPointsYearonYearThisYear);
                addData(chart, [], DataPointsYearonYearLastYear);

            });

            $(document).scrollTop($("#client-nav").offset().top);

        });

        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.update();
        }

        function removeData(chart) {
            chart.data.labels.pop();
            chart.data.datasets.forEach((dataset) => {
                dataset.data.pop();
            });
            chart.update();
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...