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

【问题标题】：Dynamic multiple charts in chart.js with dynamic data inside themchart.js 中的动态多个图表，其中包含动态数据
【发布时间】：2018-04-01 16:13:14
【问题描述】：

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

我找到了创建动态图表的解决方案，但每次创建图表时 - 我在甜甜圈中间输入文本，但它也显示在其他图表上

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

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

【问题讨论】：

标签： html typescript ionic2 chart.js

【解决方案1】：

在您的插件中，更改这行代码：

var text = $var + "%",

到这里：

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

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

查看working example

【讨论】：

工作就像一个魅力！现在连文字都是动态的……干得好。