更新圖表時修改chart.js中的標簽

Question

我正在使用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);
});

有人可以幫助我嗎？

非常感謝

Answer 1

您可以按如下方式更新

chart.config.data.labels = newLabels // you can pass the new labels
chart.update()

Answer 2

也試試

chart.data.labels = newLabels
chart.update()