如何在vue-chartjs图表中使用插件?

Question

我正在使用vue-chartjs为我的Vue3应用程序，我真的不明白插件是如何工作的。

我从文档中取了条形图的例子，在这里可以找到

在barChart中。在(第5到14行)，有一些插件导入:">Title传说",">"等现在，我想要一个Title，所以我在第77行

添加了这段代码

plugins: {
title: {
display: true,
padding: {
top: 10,
bottom: 30
},
text: 'Chart.js Bar Chart'
},
subtitle: {
display: true,
text: 'Custom Chart Subtitle'
}
}

似乎工作得很好…但是如果我有一个Legend

legend: {
display: true,
position: 'bottom',
title: {
display: true,
text: 'Test legend'
}
},

它在返回函数的Bar上给我一个错误:

No overload matches this call.
The last overload gave the following error.
Argument of type 'TypedChartComponent<"bar", number[], unknown>' is not assignable to 
parameter of type 'DefineComponent<{ chartData: { labels: string[]; datasets: ...
...
runtime-core.d.ts(928, 25): The last overload is declared here.

如何添加这个插件

Answer 1

明确设置类型可以消除类型错误。

import {
ChartOptions
} from "chart.js";
const chartOptions: ChartOptions<"bar"> = { /* ... */ };

下面是一个例子。