我一直试图在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',
},
},
},
},};
错误：在scales.x内设置time属性时出现以下错误：
Type 'string' is not assignable to type '"timeseries"'.
有人知道怎么解决这个问题吗？
谢谢您！
编辑：
我已经按照 date-fns 适配器的安装步骤安装了必要的依赖项，导入了适配器并添加了选项，删除了 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"'.
3条答案
按热度按时间y1aodyip1#
你可以试试这个
guykilcj2#
首先你需要删除
beginAtZero: false，因为它只适用于线性刻度，与时间刻度冲突，因此会给予错误。从错误中看，你似乎没有安装日期适配器。这是时间刻度和打字工作所必需的。https://www.chartjs.org/docs/master/axes/cartesian/time.html#date-adapters
kpbwa7wx3#
我发现这篇文章（https://blog.devgenius.io/using-chart-js-with-react-to-create-a-line-chart-showing-progress-over-time-3e34377b1391）建议将type-和time选项移到适配器选项中，如下所示：
但不幸的是选项没有得到正确应用，所以也许还有更多的步骤缺失...
编辑：
看起来graph-options/the adapter与typescript不匹配，所以我可以通过忽略带有graph的文件的typescript来解决这个问题，只需添加
// @ts-nocheck我不知道这是否是最好的解决方案，但至少图形现在按预期工作。