React chartjs 2 -类型'string'无法指派给类型'“timeseries”'

tf7tbtn2  于 2022-11-07  发布在  Chart.js
关注(0)|答案(3)|浏览(218)

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

图表选项代码段

  1. const options = {
  2. plugins: {...},
  3. scales: {
  4. x: {
  5. ticks: {
  6. autoSkip: true,
  7. maxTicksLimit: 4,
  8. minRotation: 0,
  9. maxRotation: 0,
  10. },
  11. beginAtZero: false,
  12. type: 'time',
  13. time: {
  14. unit: 'month',
  15. },
  16. },
  17. },
  18. },

};

错误:在scales.x内设置time属性时出现以下错误:

Type 'string' is not assignable to type '"timeseries"'.
有人知道怎么解决这个问题吗?
谢谢您!

编辑

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

  1. const options = {
  2. plugins: {...},
  3. scales: {
  4. x: {
  5. ticks: {
  6. autoSkip: true,
  7. maxTicksLimit: 4,
  8. minRotation: 0,
  9. maxRotation: 0,
  10. },
  11. adapters: {
  12. date: {
  13. locale: 'hr',
  14. },
  15. },
  16. type: 'time',
  17. time: {
  18. unit: 'month',
  19. },
  20. },
  21. },
  22. },

完整错误

  1. 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>'.
  2. Types of property 'scales' are incompatible.
  3. Type '{ x: { ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date:
  4. { locale: string; }; }; time: { unit: string; }; }; y: { ticks: { ...; }; }; }' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
  5. Property 'x' is incompatible with index signature.
  6. 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">
  7. & { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
  8. 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: { ...; }; }>'.
  9. Types of property 'type' are incompatible.
  10. Type 'string' is not assignable to type '"timeseries"'.
y1aodyip

y1aodyip1#

你可以试试这个

  1. type: 'time' as const,
  2. time: {
  3.  unit: 'month' as const,
  4. },
guykilcj

guykilcj2#

首先你需要删除beginAtZero: false,因为它只适用于线性刻度,与时间刻度冲突,因此会给予错误。从错误中看,你似乎没有安装日期适配器。这是时间刻度和打字工作所必需的。
https://www.chartjs.org/docs/master/axes/cartesian/time.html#date-adapters

kpbwa7wx

kpbwa7wx3#

我发现这篇文章(https://blog.devgenius.io/using-chart-js-with-react-to-create-a-line-chart-showing-progress-over-time-3e34377b1391)建议将type-和time选项移到适配器选项中,如下所示:

  1. adapters: {
  2. date: { locale: enGB },
  3. type: "time",
  4. time: {
  5. unit: "month",
  6. },
  7. },

但不幸的是选项没有得到正确应用,所以也许还有更多的步骤缺失...

编辑:

看起来graph-options/the adapter与typescript不匹配,所以我可以通过忽略带有graph的文件的typescript来解决这个问题,只需添加
// @ts-nocheck
我不知道这是否是最好的解决方案,但至少图形现在按预期工作。

展开查看全部

相关问题