英文:
Modify the labels in chart.js when I update the chart
问题
我正在使用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) => { //第一次尝试
//dat.labels = etiquetas;
//});
//chart.data.labels = etiquetas; // 第二次尝试
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);
});
希望这可以帮助你。
英文:
I'm working with chart.js to create some dynamical charts. I know how to create different kind of charts and modify the data that I want to show but the problem is that I don't know how to update the label.
Here I show my code just updating data:
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);
});
});
Now I show some wrong ideas to update the label:
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);
});
Can somebody help me?
Thank you very much
答案1
得分: 3
你可以按如下方式更新：
chart.config.data.labels = newLabels // 你可以传递新的标签
chart.update()
英文:
You can update like as follows
chart.config.data.labels = newLabels // you can pass the new labels
chart.update()
答案2
得分: 0
尝试一下
chart.data.labels = 新标签
chart.update()
英文:
Try it also
chart.data.labels = newLabels
chart.update()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论