Javascript 如何在新图表中添加不同的数据？

我已经用init和destroy函数将条形图制作成折线图，但我想在新图表中添加不同的数据和标签，因此折线图包含“棕榈油”、“葵花油”、“橄榄油”等标签，但条形图保留原始数据。我该怎么做？当我向init函数添加数据时，整个图表就消失了

    <script> 
            var canvas = document.getElementById("barChart");
    var ctx = canvas.getContext('2d');
    // We are only changing the chart type, so let's make that a global variable along with the chart object:
    var chartType = 'bar';
    var myBarChart;

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'grey';
    Chart.defaults.global.defaultFontSize = 16;

    var data = {
      labels: [ "2012", "2013", "2014", "2015", "2016", "2017",],
      datasets: [{
        label: "Miljoner ton",
        fill: true,
        lineTension: 0.1,
        backgroundColor: "rgba(0,255,0,0.4)",
        borderColor: "green", // The main line color
        borderCapStyle: 'square',
        pointBorderColor: "white",
        pointBackgroundColor: "green",
        pointBorderWidth: 1,
        pointHoverRadius: 8,
        pointHoverBackgroundColor: "yellow",
        pointHoverBorderColor: "green",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10,
        data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
        spanGaps: true,
      }]
    };

    // Notice the scaleLabel at the same level as Ticks
    var options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      title: {
        fontSize: 18,
        display: true,
        text: 'Källa: Globallife.org',
        position: 'bottom'
      }
    };

    //Lägg till data            
function addData() {
  myBarChart.data.labels[6] ="Ekologisk palmolja";

  myBarChart.data.datasets[0].data[6] = 14;

  myBarChart.update();

}

    // We add an init function down here after the chart options are declared.

    init();

    function init() {
      // Chart declaration:
      myBarChart = new Chart(ctx, {
        type: chartType,
        data: data,
        options: options
      });
    }



    function button() {
      //destroy chart:
      myBarChart.destroy();
      //change chart type: 
      this.chartType = (this.chartType == 'bar') ? 'line' : 'bar';


      //restart chart:
      init();
    }


                // requested function; removes index 7.
function removeData(e) {
  myBarChart.data.labels.splice(7, 1);
  myBarChart.data.datasets[0].data.splice(7, 1);
  myBarChart.update();

}

                function removeData(e) {
  myBarChart.data.labels.splice(6, 1);
  myBarChart.data.datasets[0].data.splice(6, 1);
  myBarChart.update();
}

                document.getElementById('remove1').addEventListener('click', removeData);
            </script>

var canvas=document.getElementById（“条形图”）；
var ctx=canvas.getContext（'2d'）；
//我们只更改图表类型，因此让我们将其与图表对象一起作为全局变量：
var chartType=‘bar’；
var-myBarChart；
//全球选择：
Chart.defaults.global.defaultFontColor='灰色'；
Chart.defaults.global.defaultFontSize=16；
风险值数据={
标签：[“2012年”、“2013年”、“2014年”、“2015年”、“2016年”、“2017年”]，
数据集：[{
标签：“米尔乔纳顿”，
填充：是的，
线张力：0.1，
背景色：“rgba（0255,0,0.4）”，
边框颜色：“绿色”，//主线颜色
边框样式：“方形”，
点边框颜色：“白色”，
pointBackgroundColor:“绿色”，
点边界宽度：1，
点半径：8，
pointHoverBackgroundColor:“黄色”，
pointHoverBorderColor:“绿色”，
pointHoverBorderWidth:2，
点半径：4，
点半径：10，
数据：[56.38,59.3,61.81,58.83,52.32,66.86]，
斯潘：是的，
}]
};
//请注意，scaleLabel与Ticks处于同一级别
变量选项={
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
标题：{
尺码：18，
显示：对，
文本：“Källa:Globallife.org”，
位置：'底部'
}
};
//Lägg till数据
函数addData（）{
myBarChart.data.labels[6]=“Ekologisk palmolja”；
myBarChart.data.datasets[0]。数据[6]=14；
myBarChart.update（）；
}
//声明图表选项后，我们在下面添加了一个init函数。
init（）；
函数init（）{
//图表声明：
myBarChart=新图表（ctx{
类型：图表类型，
数据：数据，
选项：选项
});
}
功能按钮（）{
//销毁图表：
myBarChart.destroy（）；
//更改图表类型：
this.chartType=（this.chartType='bar'）？'line'：'bar'；
//重新启动图表：
init（）；
}
//请求的功能；删除索引7。
函数removeData（e）{
myBarChart.数据.标签.拼接（7,1）；
myBarChart.data.dataset[0].data.splice（7,1）；
myBarChart.update（）；
}
函数removeData（e）{
myBarChart.数据.标签.拼接（6,1）；
myBarChart.data.dataset[0].data.splice（6,1）；
myBarChart.update（）；
}
document.getElementById（'remove1'）。addEventListener（'click'，removeData）；

每次创建图表时，当前代码都会提供相同的

数据

变量。下面是通过向图表构造函数提供不同的配置选项在两个完全不同的图表之间切换的示例

让lineConfig={
键入：“行”，
数据：{
标签：['q'，'w'，'e'，'r'，'t'，'y']，
数据集：[{
数据：[6,5,4,3,2,1]
}]
}
},
barConfig={
类型：'bar'，
数据：{
标签：['a'，'s'，'d'，'f'，'g'，'h']，
数据集：[{
数据：[10,20,30,40,50,60]
}]
}
},
activeType='bar'，//我们将从条形图开始。
我的图表；
函数初始化（配置）{
//使用提供的配置创建新图表。
myChart=新图表（document.getElementById（'Chart'），config）；
}
//首先初始化为条形图。
init（barConfig）；
document.getElementById（'switch'）。addEventListener（'click'，函数（e）{
//每次单击按钮时，我们都会销毁现有图表。
myChart.destroy（）；
如果（activeType='bar'）{
//图表是一个条形图，它是一个新的折线图。
activeType='行'；
init（lineConfig）；
返回；
}
//图表是一条直线，它是一个新的条形图。
activeType='bar'；
init（barConfig）；
});

开关