Я использую диаграмму 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();
}