在使用ChartsJS 3.x时,在绘制之前注册图表插件不起作用

piok6c0g  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(166)

我更新了Chart JS版本到3.5,从那时起我得到了Chart.pluginService.register错误。我看到我必须将其更改为Chart.register,但它仍然给我错误,当我运行我的应用程序。
这是我的代码:

Chart.register({

  beforeDraw: function(chart, args, options) {

    if (chart.chart.chart.config.type == 'doughnut') {

      const width = chart.chart.width;
      const height = chart.chart.height;
      const ctx = chart.chart.ctx;

      var text;

      ctx.restore();
      ctx.clearRect(0, 0, 3000, 3000);

      fontSize = (height / sizeLabel1).toFixed(2); //250
      ctx.fillStyle = colorLabel1; //"#FFFEFE"
      ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"';
      text = chart.config.options.elements.center.text1; //"CICLE " + currentCicle + "/" + totalCicles; 
      textX = Math.round((width - ctx.measureText(text).width) / 2);
      textY = (height / positionLabel1); //3.30                          
      ctx.fillText(text, textX, textY);

      fontSize = (height / sizeLabel2).toFixed(2); //90
      ctx.fillStyle = colorLabel2; //"#FFFEFE"
      ctx.font = 'Bold ' + fontSize * 13 + 'px "Titillium Web"';
      text = chart.config.options.elements.center.text2; //"1"+"' "+"30"+"''"; 
      textX = Math.round((width - ctx.measureText(text).width) / 2);
      textY = (height / positionLabel2); //2.70                                          
      ctx.fillText(text, textX, textY);

      fontSize = (height / sizeLabel3).toFixed(2); //150       
      ctx.fillStyle = colorLabel3; //"#FFFEFE"
      ctx.font = '100 ' + fontSize * 13 + 'px "Titillium Web"';
      text = chart.config.options.elements.center.text3;
      textX = Math.round((width - ctx.measureText(text).width) / 2);
      textY = (height / positionLabel3); //1.90                 
      ctx.fillText(text, textX, textY);

      fontSize = (height / sizeLabel4).toFixed(2); //200                   
      ctx.fillStyle = colorLabel4; //"#FFFEFE"
      ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"';
      text = chart.config.options.elements.center.text4;
      textX = Math.round((width - ctx.measureText(text).width) / 2);
      textY = (height / positionLabel4); //1.50              
      ctx.fillText(text, textX, textY);

      ctx.save();
    }
  }
});

这是我得到的错误:

Error: class does not have id: function (chart,args,options) {
2o7dmzc5

2o7dmzc51#

插件需要一个ID才能像错误消息中所述的那样运行,这样chart.js就知道从哪里获取选项,例如,你的插件应该看起来像这样:

Chart.register({
  id: 'customPluginName',
  beforeDraw: (chart, args, opts) => {
    // Actual plugin code
  }
})
bwitn5fc

bwitn5fc2#

在2022年我们有ChartJS version 4.0.1
我们添加插件的方式是这样的。另外,它们可以使用plugins进行特定的配置:{“自定义标签”:{} }'我们可以添加一些参数并在钩子中处理它们。
第一个

相关问题