我更新了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) {
2条答案
按热度按时间2o7dmzc51#
插件需要一个ID才能像错误消息中所述的那样运行,这样chart.js就知道从哪里获取选项,例如,你的插件应该看起来像这样:
bwitn5fc2#
在2022年我们有ChartJS version 4.0.1
我们添加插件的方式是这样的。另外,它们可以使用
plugins
进行特定的配置:{“自定义标签”:{} }'我们可以添加一些参数并在钩子中处理它们。第一个