Узнайте, как работает Chart.js (версия 2 здесь), и сделайте это для любого атрибута, который хотите:
1. Предположим, у вас есть столбчатая диаграмма в HTML-коде, подобная приведенной ниже:
<canvas id="your-chart-id" height="your-height" width="your-width"></canvas>
2. Предположим, у вас есть код javascript, который заполняет вашу диаграмму первый раз (например, при загрузке страницы):
var ctx = document.getElementById('your-chart-id').getContext('2d');
var chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: your-lables-array,
datasets: [{
data: your-data-array,
backgroundColor: your-lables-array.map(function (item) {
return colorHash.hex(item);
})
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [ { ticks: {beginAtZero: true} } ]
},
title: {display: true, fontSize: 16, text: 'chart title'},
legend: {display: false}
}
});
Предположим, вы хотите полностью обновить свой набор данных. Все очень просто. Посмотрите на приведенный выше код и посмотрите, как проходит путь от переменной вашей диаграммы к данным, а затем следуйте указанному ниже пути:
- выберите
chartInstance
var.
- Затем выберите
data node
внутри chartInstance
.
- Затем выберите
datasets node
внутри data node
.
(примечание: как вы можете видеть, datasets node
это массив. поэтому вы должны указать, какой элемент этого массива вам нужен. Здесь у нас есть только один элемент в datasets node
. поэтому мы используемdatasets[0]
- Так что выберите
datasets[0]
- Затем выберите
data node
внутри в datasets[0]
.
Эти шаги дают вам, chartInstance.data.datasets[0].data
и вы можете установить новые данные и обновить диаграмму:
chartInstance.data.datasets[0].data = NEW-your-data-array
chartInstance.update();
Примечание.
Следуя приведенному выше алгоритму, вы можете просто достичь
каждого нужного узла .