如何将Chart.js插件指向不同的圆环图？

Question

我找到了一个Chart.js插件，它在Chart.js环形图中写入文本，如下所示。

我在页面上有两个甜甜圈。一个叫“myChart”，一个叫“secondChart”。如果我将下面的代码更改为仅指向第二个图表，则指向第二个图表。

但是，如果我将它指向第一个图表是在两个图表中呈现。有没有办法将这个插件变成可重用的函数，以便在页面上的多个图表上使用？

Chart.pluginService.register({ 
    beforeDraw: function(chart) { 
    var width = chart.chart.width, 
     height = chart.chart.height, 
     ctx = chart.chart.ctx; 

     ctx.restore(); 
     var fontSize = (height/120).toFixed(2); 
     ctx.font = fontSize + "em sans-serif"; 
     ctx.textBaseline = "middle"; 

    var text = "100%", 
     textX = Math.round((width - ctx.measureText(text).width)/2), 
     textY = height/2; 

     ctx.fillText(text, textX, textY); 
     ctx.save(); 
     } 
    }); 

Answer 1

请尝试以下代码。经过测试和工作。希望它有助于:)

var doughnutCenterText = { 
    beforeDraw: function (chart) { 
    var width = chart.chart.width, 
    height = chart.chart.height, 
    ctx = chart.chart.ctx; 

    ctx.restore(); 
    var fontSize = (height/120).toFixed(2); 
    ctx.font = fontSize + "em sans-serif"; 
    ctx.textBaseline = "middle"; 

    var text = "100%", 
    textX = Math.round((width - ctx.measureText(text).width)/2), 
    textY = height/2; 

    ctx.fillText(text, textX, textY); 
    ctx.save(); 
     } 
    }; 

//Chart1 
    this.doughnutChart1 = new Chart(this.doughnutCanvas1.nativeElement, { 
     type: 'doughnut', 
     data: { 
      datasets: [{ 
       data: [65, 35], 
       backgroundColor: [ 
        'rgba(229, 57, 53, 1)', 
        'rgba(229, 57, 53, 0.2)', 
       ], 
       hoverBackgroundColor: [ 
        'rgba(229, 57, 53, 1)', 
        'rgba(229, 57, 53, 0.2)', 
       ], 
       hoverBorderColor: [ 
        '#fff', 
        '#fff' 
       ] 
      }] 
     }, 
     plugins: [doughnutCenterText] //Note here 
    }); 

//Chart 2 
    this.doughnutChart2 = new Chart(this.doughnutCanvas2.nativeElement, { 
     type: 'doughnut', 
     data: { 
      datasets: [{ 
       data: [55, 45], 
       backgroundColor: [ 
        'rgba(0, 137, 123, 1)', 
        'rgba(0, 137, 123, 0.2)', 
       ], 
       hoverBackgroundColor: [ 
        'rgba(0, 137, 123, 1)', 
        'rgba(0, 137, 123, 0.2)', 
       ], 
       hoverBorderColor: [ 
        '#fff', 
        '#fff' 
       ] 
      }] 
     }, 
     plugins: [doughnutCenterText] //Note here 
    });