我使用vue 3已经有几个月了,在一个新的项目中我想使用chart.js -所以我找到了vue-chartjs,我认为它会有所帮助。链接中显示的示例是用“options”API编写的,但我一直在使用“composition”API,所以希望在vue-chartjs中使用它。我也在使用typescript,但是我在使用composition API版本时遇到了一个ts错误,代码无法运行。下面是最初的例子,启用了typescript(仍然可以正常工作)
<template>
<Bar
id="my-chart-id"
:options="chartOptions"
:data="chartData"
/>
</template>
<script lang="ts">
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true
}
}
}
}
</script>
.和我的转换,使用composition API:
<script lang="ts">
import { ref, onBeforeMount } from 'vue'
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
const chartData = ref({
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [50, 30, 12] } ]
});
const chartOptions = ref( {
responsive: true
});
onBeforeMount(() => {
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
console.log('bartest: onBeforeMount');
})
</script>
<template>
<Bar
:chartOptions = "chartOptions"
:chartData="chartData"
/>
</template>
但是现在我在模板中使用Bar
时出现了一个错误:
类型“{ chartOptions:{响应:public boolean; } chartData:{ labels:string[]; datasets:{ data:number[];“}[]; }; }”不能分配给类型为“{只读数据:ChartData<“bar”,(number| [数字,数字]| null)[],unknown>;只读选项?:_DeepPartialObject<CoreChartOptions<“bar”> & ElementChartOptions<“bar”> & PluginChartOptions <...>& DatasetChartOptions <...>& ScaleChartOptions <...>& BarControllerChartOptions>| undefined;. 14更多...; style?:.类型“{ chartOptions:{响应:public boolean; } chartData:{ labels:string[]; datasets:{ data:number[];}[]; }; }'但在类型'{ readonly data:ChartData<“bar”,(number| [数字,数字]| null)[],unknown>;只读选项?:_DeepPartialObject<CoreChartOptions<“bar”> & ElementChartOptions<“bar”> & PluginChartOptions <...>& DatasetChartOptions <...>& ScaleChartOptions <...>& BarControllerChartOptions>| undefined;. 14更多...; style?:...'.ts(2345)
并且还
types.d.ts(12,5):这里声明了“data”。types.d.ts
表明data
有一个类型ChartData
,但如果我尝试:
const chartData : ChartData = ref({....
那么我有一个不同的错误
类型“Ref<{ labels:string[]; datasets:{ data:number[];}[]; }>“,但在类型”ChartData<keyof ChartTypeRegistry,(number)“中是必需的|[数字,数字]|点|BubbleDataPoint| null)[],unknown_. ts(2741)
当我尝试运行这段代码时,我得到:
[Vue warn]:缺少必需的属性:“data”at <Anonymous chartOptions= {responsive:true} chartData= {labels:数组(3),数据集:Array(1)} > at.
随后出现了许多错误。
那么,为什么没有类型定义的“选项API”版本很高兴,以及我如何键入“组合API”版本?
1条答案
按热度按时间vq8itlhq1#
感谢@Estus Flask的评论,我有一个部分解决方案-代码现在运行,但在
Bar
的'data'属性上仍然存在打字错误:typescript错误是:
Type 'ChartData<keyof ChartTypeRegistry,(number| [数字,数字]|点|BubbleDataPoint| null)[],unknown>“不能分配给类型”ChartData<“bar”,(number| [数字,数字]| null)[],unknown []. ts(2322)types.d.ts(12,5):预期的类型来自属性“data”,该属性在类型“{ readonly plugins?:Plugin<“bar”,AnyObject>[]| undefined; readonly data:ChartData<“bar”,(number| [数字,数字]| null)[],unknown>;只读选项?:_DeepPartialObject <...>|undefined;.还有十三个......; style?:unknown;}记录<...>'(属性)数据(& R):ChartData<“bar”,(number| [数字,数字]| null)[],未知>