gpt4 book ai didi

chart.js - 内联插件不起作用

转载 作者:行者123 更新时间:2023-12-01 11:20:28 25 4
gpt4 key购买 nike

根据Chart.js docs ,下面的代码应该可以工作:

new Chart(document.getElementById(chartID), {
type: 'pie',
responsive: true,
maintainAspectRatio: false,
data: {
labels: graph.globals.labels,
datasets: [{
backgroundColor: pieOptions.backgrounds,
data: pieOptions.objToArr(graph.meetingsData),
hoverBorderWidth: 5,
borderColor: 'transparent',
}]
},
options: {
title: {
display: true,
text: graph.globals.title,
},
legend: {
display: true,
position: 'bottom',
fullWidth: false,
onClick: () => {},
labels: {
generateLabels: (chart) => {
return pieOptions.legendLeft(chart);
}
}
},
plugins: [{
beforeInit: function(chart, options) {
console.log('yolo');
}
}]
rotation: 3.9,
}
});

但是,当我使用变量创建插件,或者像上面所示那样创建内联插件时,它不会记录任何内容。我可以使用插件的唯一方法是在全局注册它。

有人可以向我解释为什么它不起作用吗?

最佳答案

plugins应该放在它自己的配置部分,而不是嵌套在 options 下.

代替:

options: {
title: {
display: true,
text: graph.globals.title,
},
legend: {
display: true,
position: 'bottom',
fullWidth: false,
onClick: () => {},
labels: {
generateLabels: (chart) => {
return pieOptions.legendLeft(chart);
}
}
},
plugins: [{
beforeInit: function(chart, options) {
console.log('yolo');
}
}]
rotation: 3.9,
}

您的代码应如下所示:
options: {
title: {
display: true,
text: graph.globals.title,
},
legend: {
display: true,
position: 'bottom',
fullWidth: false,
onClick: () => {},
labels: {
// generateLabels: (chart) => {
// return pieOptions.legendLeft(chart);
// }
}
},
rotation: 3.9,
},
plugins: [{
beforeInit: function(chart, options) {
console.log('yolo');
}
}]

工作 JSFiddle: https://jsfiddle.net/r1x63b8v/

关于chart.js - 内联插件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44308458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com