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

3hvapo4f  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(276)

我正在为我的Vue 3应用程序使用vue-chartjs,我真的不明白插件是如何工作的。
我采用了文档中的BarChart示例,可用here
因此,在 barChart.ts(第5行到第14行)中,有一些插件导入:“Title"、“Legend"等。现在,我想要一个标题,所以我在第77行添加了以下代码

  1. plugins: {
  2. title: {
  3. display: true,
  4. padding: {
  5. top: 10,
  6. bottom: 30
  7. },
  8. text: 'Chart.js Bar Chart'
  9. },
  10. subtitle: {
  11. display: true,
  12. text: 'Custom Chart Subtitle'
  13. }
  14. }

它看起来很好用...但如果我有一个传奇,

  1. legend: {
  2. display: true,
  3. position: 'bottom',
  4. title: {
  5. display: true,
  6. text: 'Test legend'
  7. }
  8. },

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

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

如何添加此插件?

ds97pgxw

ds97pgxw1#

显式设置类型应该可以消除类型错误。

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

这里是an example

相关问题