javascript - ChartJS 数字显示在数字顶部

Question

对于一个项目，我在 Chartjs 中做了一些看起来像这样的东西:https://jsfiddle.net/ethernetz/e50fn31m/2/

我必须在互联网上进行一些挖掘，才能在圆环图的中间显示一个数字，但这正是我想要的。然后我想制作第二个圆环图，这使得该项目看起来像这样:https://jsfiddle.net/ethernetz/4uw1ksu1/

如您所见，完成图中的“60”显示在未完成图中的“40”之上，反之亦然。

我怀疑这与我从未在此处指定要编辑的图表有关:

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

...但我不知道如何解决它。任何帮助将不胜感激。

Answer 1

更改插件中的以下代码行:

var text = 60;

对此:

var text = chart.id == 0 ? 60 : 40;

基本上，当创建图表时，它会被分配一个id(基于0)。因此您需要根据该图表 ID 设置文本。

此外，无需添加两个单独的插件，因为您正在创建一个全局插件，该插件将应用于您的所有图表。

这是working example on JSFiddle