chart.js中的动态多图表，其中包含动态数据

Question

我有一个问题，以动态方式显示圆环图中的百分比。我想在同一页面中有多个动态图表（未知数字）。

我找到了一个创建动态图表的解决方案，但每次创建图表时 - 我都会在甜甜圈中间提供文字，但它也显示在其他图片上

我用这个把百分比放在甜甜圈的中间

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

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

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

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

Answer 1

在你的插件中，更改以下代码行：

var text = $var + "%",

到此：

var text = chart.options.centerText + "%",

..然后，将 centerText 属性设置为图表选项中的数据值（对于每个图表）

查看working example