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

3hvapo4f 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(238)

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

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

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

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.

如何添加此插件？

chart.js

来源：https://stackoverflow.com/questions/72661526/how-to-use-the-plugins-in-a-vue-chartjs-chart

1条答案

按热度按时间

ds97pgxw1#

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

import {
  ChartOptions
} from "chart.js";

const chartOptions: ChartOptions<"bar"> = { /* ... */ };

这里是an example。

赞(0）回复(0）举报 2022-11-07

我来回答

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

1条答案

相关问题

热门标签

最新问答