更新Chart.js插件

q3aa0525  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(231)

是否可以使用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();
   }
 }

如果你有什么想法,我将不胜感激,谢谢。

vlf7wbxs

vlf7wbxs1#

我也试着在图表更新之前重新提供插件,但是它没有被调用。所以我修改了我的插件,以接受@Input()组件变量,它的变化图表更新被调用。
请看我的例子--我必须在圆环图的中间显示一个总百分比。为此,我需要在afterDraw事件中调用一个插件。我做了两个修改:
1.我用箭头函数替换了插件中的function关键字,这样我就可以使用this关键字来使用类变量。
1.然后我在我的插件中使用了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();            
}

相关问题