在vue-chartjs上设置ChartJS插件不工作

Question

我试图改变我的ChartJS图表的画布背景颜色导出它作为一个图像，但它有一个黑色的背景。我已经从文档中尝试了解决方案，但似乎不起作用。我已经添加了插件定义，从ChartJS文档到我的chartData的一个例子。我相信我遵循了ChartJS和vue-chartjs的文档所说的，但我不明白我做错了什么。还有别的办法吗?

// inside vue template
<BarChart id="barChart" :chartData="chartData"/>
// inside js script
const chartData = {
labels: [],
datasets: [
{
label: "Positive",
backgroundColor: "#66bd63",
borderColor: "#66bd63",
barThickness: 40,
fill: false,
data: []
},
{
label: "Negative",
backgroundColor: "#f46d43",
borderColor: "#f46d43",
barThickness: 40,
fill: false,
data: []
},
],
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: {
mode: "index",
intersect: false
},
hover: {
mode: "nearest",
intersect: true
},
animation: {
onComplete: function() {
console.log("Hello")                        
}
},
},
plugins: [
{
id: 'custom_canvas_background_color',
beforeDraw: (chart) => {
const ctx = chart.canvas.getContext('2d');
ctx.save();
ctx.fillStyle = 'lightGreen'
ctx.restore()
}
}
]
};

Answer 1

完全忘了这个。但我修好了。这是一个打字错误。记住，当传递自定义插件时，plugins prop接受一个数组。

<BarChart :chartData="chartData" :plugins="[plugin]"/>