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
    });

如何将Chart.js插件指向不同的甜甜圈图表？

1 个答案: