Javascript 更新chart.js中的数据

我刚刚遇到了

chart.js

，我正在努力处理它，但这对我来说越来越难了

我的初衷是获得一些数据，

var data=[2478526773478433]但如果单击按钮，则会对其进行修改并更新表格，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);
        }
    });
});

如果有人能指引我，那就太好了。我认为这是一个非常有用的工具，当涉及到图形信息，我想学习如何处理它

非常感谢。
如果需要访问图表变量，请使作用域更易于访问

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


const colors=[“#3e95cd”、“#8e5ea2”、“#3cba9f”、“#e8c3b9”、“#c45850”]；
const etiquetas=[“非洲”、“亚洲”、“欧洲”、“拉丁美洲”、“北美”]；
var myPieChart=null；//“全球”访问。。。
功能图表（datos）{
设ctx=document.getElementById（“饼图”）.getContext（“2d”）；
让tipo=派；
让titulo=‘预测2050年世界人口（百万）’；
myPieChart=新图表（ctx{
类型:tipo,，
数据：{
标签：etiquetas，
数据集：[{
标签：“人口（百万）”，
背景颜色：颜色，
边框宽度：1，
边框颜色：“#FFF”，
数据：达托斯，
}]
},
选项：{
标题：{
显示：对，
正文：提特罗
}
}
});
}
函数addData（图表、标题、数据）{
chart.options.title.text=标题；
chart.data.datasets.forEach（（数据集，i）=>{
dataset.data=数据；
});
chart.update（）；
}
函数removeData（图表）{
chart.data.dataset.forEach（（数据集）=>{
dataset.data.pop（）；
});
chart.update（）；
}
//主要
$（文档）.ready（函数（）{
pieChart（[2478526773478433]）；
//波顿普尔萨多酒店
$（'.btn_graf'）。单击（函数（）{
设id_btn=$（this.attr（“id”）；
如果（id_btn=='bat_graf_btn'）{
移除数据（myPieChart）；
addData（myPieChart，“人口（百万）”，[2,5,7,7,4]）；
}
});
});

更改数据
如果需要访问图表变量，请使范围更易于访问

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


const colors=[“#3e95cd”、“#8e5ea2”、“#3cba9f”、“#e8c3b9”、“#c45850”]；
const etiquetas=[“非洲”、“亚洲”、“欧洲”、“拉丁美洲”、“北美”]；
var myPieChart=null；//“全球”访问。。。
功能图表（datos）{
设ctx=document.getElementById（“饼图”）.getContext（“2d”）；
让tipo=派；
让titulo=‘预测2050年世界人口（百万）’；
myPieChart=新图表（ctx{
类型:tipo,，
数据：{
标签：etiquetas，
数据集：[{
标签：“人口（百万）”，
背景颜色：颜色，
边框宽度：1，
边框颜色：“#FFF”，
数据：达托斯，
}]
},
选项：{
标题：{
显示：对，
正文：提特罗
}
}
});
}
函数addData（图表、标题、数据）{
chart.options.title.text=标题；
chart.data.datasets.forEach（（数据集，i）=>{
dataset.data=数据；
});
chart.update（）；
}
函数removeData（图表）{
chart.data.dataset.forEach（（数据集）=>{
dataset.data.pop（）；
});
chart.update（）；
}
//主要
$（文档）.ready（函数（）{
pieChart（[2478526773478433]）；
//波顿普尔萨多酒店
$（'.btn_graf'）。单击（函数（）{
设id_btn=$（this.attr（“id”）；
如果（id_btn=='bat_graf_btn'）{
移除数据（myPieChart）；
addData（myPieChart，“人口（百万）”，[2,5,7,7,4]）；
}
});
});

更改数据：
var-datos=[2,5,7,7,4]
声明了第二个变量，也称为
datos
，该变量与外部范围中声明的变量相关联。删除
var
，使其使用相同的变量mm不，发生相同的情况。正在创建一个新的并将其叠加：（您试图创建的图形显示使数据操作更加困难。在数据正确之前，请清除这些内容。只需将值输出到控制台。
var
关键字声明了一个新变量。这就是它所做的。您有两个数组，都称为
datos
，每个数组位于不同的作用域包含不同的数据。在创建图表之前，您需要弄清楚它是如何工作的。这：
var datos=[2,5,7,7,4]
声明第二个变量，也称为
datos
，该变量与外部作用域中声明的变量有阴影。删除
var
，使其使用相同的变量mm否，发生的情况相同。正在创建一个新变量并将其叠加：（您试图创建的图形显示使数据操作更加困难。在数据正确之前，请清除这些内容。只需将值输出到控制台。
var
关键字声明了一个新变量。这就是它所做的。您有两个数组，都称为
datos
，每个数组位于不同的作用域包含不同的数据。在创建图表之前，您需要弄清楚它是如何工作的。@NEA我必须修改您的
addData（）
函数。请参阅上面更新的代码。@NEA我必须修改您的
addData（）
函数。请参阅上面更新的代码。