React Chartjs 2 - 类型“string”不可分配给类型““timeseries””

Question

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

图表选项代码片段：

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

你可以试试这个

\n

type: 'time' as const,\ntime: {\n\xe3\x80\x80unit: 'month' as const,\n},\n

\n

Answer 2

首先，您需要删除 ，beginAtZero: false因为它仅适用于线性比例并且与时间比例冲突，因此会给出错误。从错误来看，您可能没有安装日期适配器。这是时间刻度和打字工作所必需的。

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