Измените метки на диаграмме. js при обновлении диаграммы - PullRequest
2 голосов
/ 06 января 2020

Я работаю с 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);
});

Может ли кто-нибудь мне помочь?

Большое спасибо

Ответы [ 2 ]

3 голосов
/ 06 января 2020

Вы можете обновить, как показано ниже

chart.config.data.labels = newLabels // you can pass the new labels
chart.update()
0 голосов
/ 06 января 2020

Попробуйте также

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