使用ChartJS更改点击数据

Question

我在ChartJS中有一个带有欧元值的折线图。我希望能够更改$中的数据。

欧元图表运行良好，但我无法更改数据。

我的图表：

   <canvas id="myChart" width="820" height="650"></canvas>
   let ctx = document.getElementById("myChart");
   Chart.defaults.global.defaultFontSize = 15;

   var dataEu = [{{{ cote_1989_eu_base_eu }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_eu }}}, {{{ cote_2017_base_eu }}}, {{{ cote_actual_base_eu }}}];
   var dataUsd = [{{{ cote_1989_eu_base_usd }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_usd }}}, {{{ cote_2017_base_usd }}}, {{{ cote_actual_base_usd }}}];
   var myChart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: ["1989", "2004", "2014", "2017", "2019"],
            datasets: [
               {
                  spangaps: true,
                  label: 'Exceptionnel',
                  data: dataEu,
                  backgroundColor: 'transparent',
                  borderColor: '#00C853',
                  borderWidth: 4,
                  pointWidth: 3,
                  pointRadius: 5,
                  pointHoverRadius: 6,
                  pointBorderColor: '#FFF',
                  pointBackgroundColor: '#00C853',
                  pointBorderWidth: 1,
                  pointHitRadius: 100,
                  datalabels: {
                     display: false
                     }
                  }]}
});

例如，如果单击单选按钮，以后如何更改数据，用dataUsd替换dataEu？

if (radioButtonEu.checked = true) {
???
}

Answer 1

假设dataUs和dataEu是具有值的数组，您可以使用javascript这样轻松地访问和更改图表的数据：

myChart.data.datasets[0].data = dataUs; // assuming dataUs is an array

完成后，您需要使用以下方式重新显示图表

myChart.update();

这里有一个全功能的CODEPEN EXAMPLE。随时进行操作并尝试使用它。