更新 chart.js 中的数据

Question

我刚遇到chart.js ，我正在努力处理它，但对我来说越来越难了。

我的意图是最初有一些数据， var data = [2478,5267,734,784,433]; 但是如果单击按钮，则会修改这些并更新表格，var data = [2,5,7,7,4];

使用下面显示的代码，我可以做到，但我实际上是在创建一个新代码，因此两者重叠。

function pieChart(datos){
    var ctx = document.getElementById("pie-chart").getContext("2d");

    var tipo = 'pie';
    var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
    //var datos = [2478,5267,734,784,433];
    var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
    var titulo = 'Predicted world population (millions) in 2050';

    var myPieChart = new Chart(ctx, {
        type: tipo,
        data: {
            labels: etiquetas,
            datasets: [{
              backgroundColor: colores,
              borderWidth: 1,
              borderColor: '#FFF',
              data: datos
            }]
          },
          options: {
            title: {
              display: true,
              text: titulo
            }
          }
    });
}

// MAIN
$(document).ready(function(){

    var datos = [2478,5267,734,784,433];
    pieChart(datos);

    // Botón pulsado
    $('.btn_graf').click(function(){
        var id_btn = $(this).attr("id");

        if (id_btn == 'bat_graf_btn'){
            alert('pulsado');
            var datos = [2,5,7,7,4];
            pieChart(datos);
        }
    });
});

阅读文档我看到它可以通过调用一个函数并向数组添加值来完成，我想以前已经删除了旧的。 但我不知道该怎么做，因为我可能做错了/理解了一些错误。

function pieChart(datos){
    var ctx = document.getElementById("pie-chart").getContext("2d");

    var tipo = 'pie';
    var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
    //var datos = [2478,5267,734,784,433];
    var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
    var titulo = 'Predicted world population (millions) in 2050';

    var myPieChart = new Chart(ctx, {
        type: tipo,
        data: {
            labels: etiquetas,
            datasets: [{
              label: "Population (millions)",
              backgroundColor: colores,
              borderWidth: 1,
              borderColor: '#FFF',
              data: datos,
            }]
          },
          options: {
            title: {
              display: true,
              text: titulo
            }
          }
    });
}
function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}
function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

// MAIN
$(document).ready(function(){

    var datos = [2478,5267,734,784,433];
    pieChart(datos);

    // Botón pulsado
    $('.btn_graf').click(function(){
        var id_btn = $(this).attr("id");

        if (id_btn == 'bat_graf_btn'){
            alert('pulsado');
            var datos = [2,5,7,7,4];
            removeData(myPieChart);
            addData(myPieChart, "Population (millions)", datos);
        }
    });
});

如果有人可以指导我，那就太好了。 我认为在绘制信息时它是一个非常有用的工具，我想学习如何处理它。

非常感谢。

Answer 1

如果您需要访问图表变量，请使范围更易于访问。

在顶部将其初始化为null并在函数中赋值。 然后您可以稍后访问它。

 const colores = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]; const etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"]; var myPieChart = null; // "global" access... function pieChart(datos) { let ctx = document.getElementById("pie-chart").getContext("2d"); let tipo = 'pie'; let titulo = 'Predicted world population (millions) in 2050'; myPieChart = new Chart(ctx, { type: tipo, data: { labels: etiquetas, datasets: [{ label: "Population (millions)", 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(); } function removeData(chart) { chart.data.datasets.forEach((dataset) => { dataset.data.pop(); }); chart.update(); } // MAIN $(document).ready(function() { pieChart([2478, 5267, 734, 784, 433]); // Botón pulsado $('.btn_graf').click(function() { let id_btn = $(this).attr("id"); if (id_btn == 'bat_graf_btn') { removeData(myPieChart); addData(myPieChart, "Population (millions)", [2, 5, 7, 7, 4]); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" /> <canvas id="pie-chart"></canvas> <button class="btn_graf" id="bat_graf_btn">Change Data</button>