我在TypeScript的Vite/React项目中使用chart.js和以下库/版本:
- chart.js:4.3.0
- react-chartjs-2:5.2.0
- chartjs-adapter-date-fns:3.0.0
- chartjs-plugin-datalabels:2.2.0
我现在遇到了一个难题,因为我想使用一个“时间”类型的折线图,所以我的数据集的x
是字符串(格式化的日期),而我的数据集的y
是数字。
在声明数据集时,我尽可能地明确:
const data: ChartData<"line", StatPointDto[]> = {
datasets: [
{
...
data: props.data.ios,
...
},
{
...
data: props.data.android,
...
},
] as ChartDataset<"line", StatPointDto[]>[],
};
props.data.ios
和props.data.android
都是StatPointDto[]
。StatPointDto
是我在项目中使用的一个简单的 Package 器类,定义如下:
export class StatPointDto {
public x: string;
public y: number;
constructor(x: string, y: number) {
this.x = x;
this.y = y;
}
}
我的图表声明如下,没什么花哨的:
<Line
data={chartData}
options={chartOptions}
/>
在这个ChartData设置中,我得到了一个TypeScript类型不匹配错误:
Types of property 'data' are incompatible.
Type 'StatPointDto[]' is not assignable to type '(number | Point | null)[]'.
Type 'StatPointDto' is not assignable to type 'number | Point | null'.
Type 'StatPointDto' is not assignable to type 'Point'.
Types of property 'x' are incompatible.
Type 'string' is not assignable to type 'number'.
通过阅读,我看到Chart.js希望我的数据集元素是数字,Points
或null。Chart.js的Point
定义有x
和y
作为数字,但由于这是一个时间序列,我有x
字符串,这就是不起作用。
考虑到x
值是字符串(日期),y
值是数字,我可以做些什么来正确传递我的点数据,而不会被TypeScript大喊大叫?
- 注意:根据www.example.com,这应该是允许的https://www.chartjs.org/docs/latest/general/data-structures.html#typescript*
先谢谢你了!
1条答案
按热度按时间wbgh16ku1#
我的错,错误来自其他东西,在我的情况下,它来自使用React
useState
钩子的声明:这是不完整的,导致我的代码中的类型不一致。我把它写下来: