更新Chart.js插件

Question

是否可以使用chart.update()更新chart.js插件？

我尝试了以下，但似乎插件没有更新。

  let myChart;
  function drawChart(chart) {
    const ctx = document.getElementById("my-chart");
    if (!myChart) {
      myChart = new Chart(ctx, {
        type: 'scatter',
        data: chart.data,
        options: chart.option,
        plugins: chart.plugin
      });
    } else {
      myChart.data = chart.data;
      myChart.options = chart.option;
      myChart.plugins = chart.plugin;
      myChart.update();
   }
 }

任何想法都将不胜感激，谢谢。

Answer 1

我还尝试在图表更新之前重新提供插件，但它没有被调用。因此，我修改了我的插件，以获取调用其更改图表更新的@Input（）组件变量。

请看一下我的例子 - 我必须在圆环图中间显示总百分比。为此，我需要在afterDraw事件中调用一个插件。我做了2次更改 -

1）用箭头函数替换插件中的函数关键字，以便我可以使用'this'关键字来使用类变量。

2）然后我在我的插件中使用了this.total，它将获得我想要显示的总％。因此，在图表更新期间 - 我的新总计（总计是@Input（）变量）将自动更新。

if (!this.doughnutChart && this.doughnut) {

                let ctx = this.doughnut.nativeElement.getContext("2d");
                if (ctx) {
                    this.doughnutChart = new Chart(ctx, {
                        // The type of chart we want to create
                        type: 'doughnut',

                        // The data for our dataset
                        data: {
                            labels: this.labels,
                            datasets: [{
                                data: this.dataArray,
                                backgroundColor: this.colorsArray
                            }]
                        },

                        // Configuration options go here
                        options: this.chartOptions,

                        // plugin property will help to place total count at the center of the doughnut after chart is rendered
                        plugins: [{
                            id: this.canvasId + '_plugin',
                            afterDraw: (chart) => {// using arrow function here
                                chart.ctx.fillStyle = 'black'
                                chart.ctx.textBaseline = 'middle'
                                chart.ctx.textAlign = 'center'
                                chart.ctx.font = '17px Verdana'
                                // using this.total here
                                chart.ctx.fillText(this.total + '%', chart.canvas.clientWidth / 2, (chart.canvas.clientHeight / 2) + (titlePadding * 7 + 2 - bottomPadding))
                            }
                        }]
                    });
                }
        }
        else if (this.doughnutChart) {
            // update the chart
            this.doughnutChart.data.datasets[0].backgroundColor = this.colorsArray;                     
            this.doughnutChart.update();            
        }