Я работаю с chart.js
для создания динамических диаграмм. Я знаю, как создавать различные виды диаграмм и изменять данные, которые я хочу показать, но проблема в том, что я не знаю, как обновить метку.
Здесь я показываю свой код, просто обновляя данные:
const colores = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#FFF850"];
const etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America","Miguel"];
var paquetes_pie = null;
function graficoPaquetes(datos) {
let ctx = document.getElementById("paquetes_graf").getContext("2d");
let tipo = 'pie';
let titulo = 'Paquetes perdidos';
paquetes_pie = new Chart(ctx, {
type: tipo,
data: {
labels: etiquetas,
datasets: [{
label: "Paquetes perdidos",
backgroundColor: colores,
borderWidth: 1,
borderColor: '#FFF',
data: datos,
}]
},
options: {
title: {
display: true,
text: titulo
}
}
});
}
function addData(chart, title, data) {
chart.options.title.text = title;
chart.data.datasets.forEach((dataset, i) => {
dataset.data = data;
});
chart.update();
}
$(document).ready(function() {
var data = [2478, 5267, 734, 784, 433, 99];
graficoPaquetes(data);
$('.btn_graf').click(function() {
data = [24, 67, 4, 4, 3, 9];
addData(paquetes_pie, "Paquetes perdidos", data);
});
});
Теперь я показываю некоторые неправильные идеи по обновлению этикетки:
function addData(chart, title, data, etiquetas) {
chart.options.title.text = title;
chart.data.datasets.forEach((dataset, i) => {
dataset.data = data;
});
/*chart.data.forEach((dat, i) => { //first attempt
dat.labels = etiquetas;
});*/
//chart.data.labels = etiquetas; // Second attempt
chart.update();
}
$('.btn_graf').click(function() {
data = [24, 67, 4, 4, 3, 9];
etiquetas = ["A", "B", "C", "D", "E", "F"];
addData(paquetes_pie, "Paquetes perdidos", data, etiquetas);
});
Может ли кто-нибудь мне помочь?
Большое спасибо