ChartJS 对于时间类型的折线图,TypeScript不接受x为字符串的点

gzszwxb4  于 2023-06-29  发布在  Chart.js
关注(0)|答案(1)|浏览(133)

我在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.iosprops.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定义有xy作为数字,但由于这是一个时间序列,我有x字符串,这就是不起作用。
考虑到x值是字符串(日期),y值是数字,我可以做些什么来正确传递我的点数据,而不会被TypeScript大喊大叫?

  • 注意:根据www.example.com,这应该是允许的https://www.chartjs.org/docs/latest/general/data-structures.html#typescript*

先谢谢你了!

wbgh16ku

wbgh16ku1#

我的错,错误来自其他东西,在我的情况下,它来自使用React useState钩子的声明:

const [chartData, setChartData] = useState<ChartData<"line">>({
    datasets: [],
});

这是不完整的,导致我的代码中的类型不一致。我把它写下来:

const [chartData, setChartData] = useState<ChartData<"line", StatPointDto[]>>({
    datasets: [],
});

相关问题