React chartjs 2 - Type 'string'不能赋值给类型'& #39;<

Question

我一直在尝试将x轴设置为react-chartjs-2中的时间刻度，但无法通过以下错误。

图表选项代码片段:

const options = {
plugins: {...},
scales: {
x: {
ticks: {
autoSkip: true,
maxTicksLimit: 4,
minRotation: 0,
maxRotation: 0,
},
beginAtZero: false,
type: 'time',
time: {
unit: 'month',
},
},
},
},

};误差

:设置time属性在scales.x给我以下错误:

Type 'string' is not assignable to type '"timeseries"'.

有没有人对如何解决这个问题有任何线索?

谢谢!

编辑:

我已经按照这里所说的date-fns适配器的安装步骤- npm安装了必要的依赖项，导入了适配器并添加了选项，删除了beginAtZero属性，但错误仍然存在。

const options = {
plugins: {...},
scales: {
x: {
ticks: {
autoSkip: true,
maxTicksLimit: 4,
minRotation: 0,
maxRotation: 0,
},
adapters: {
date: {
locale: 'hr',
},
},
type: 'time',
time: {
unit: 'month',
},
},
},
},

完整误差:

Type '{ plugins: { legend: { display: boolean; }; tooltip: { mode: "index"; intersect: boolean; }; }; scales: { x: { ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { ...; }; time: { ...; }; }; y: { ...; }; }; hover: { ...; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
Types of property 'scales' are incompatible.
Type '{ x: { ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: 
{ locale: string; }; }; time: { unit: string; }; }; y: { ticks: { ...; }; }; }' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
Property 'x' is incompatible with index signature.
Type '{ ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: { locale: string; }; }; time: { unit: string; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> 
& { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
Type '{ ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: { locale: string; }; }; time: { unit: string; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }>'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"timeseries"'.

Answer 1

你可以试试这个

type: 'time' as const,
time: {
　unit: 'month' as const,
},

Answer 2

我现在也有同样的问题。我发现这篇文章(https://blog.devgenius.io/using-chart-js-with-react-to-create-a-line-chart-showing-progress-over-time-3e34377b1391)建议将类型和时间选项移动到适配器选项中，如下所示:

adapters: {
date: { locale: enGB },
type: "time",
time: {
unit: "month",
},
},

但不幸的是，这些选项没有正确应用，所以可能还有更多的步骤丢失…

编辑:

似乎图形选项/适配器与typescript不能很好地配合，所以我可以通过简单地添加

来忽略带有图形文件的typescript来解决这个问题。// @ts-nocheck

在文件的开头。我不知道这是不是最好的解决方案，但至少图表现在工作如预期。

Answer 3

首先，你需要删除beginAtZero: false，因为它只适用于线性尺度，并与时间尺度相冲突，因此它会给出一个错误。从错误看来，你可能没有安装日期适配器。这对于时间刻度和类型的工作是必要的。

https://www.chartjs.org/docs/master/axes/cartesian/time.html date-adapters