更新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);
        }
    });
});

读取documentation我看到可以通过调用一个函数并将值添加到数组中来完成，我想以前的旧值已经被删除了。但是我不知道该怎么做，因为我可能做错了一些事情/理解了。

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>