英文:
Chart.js type error after migration v3 to v4
问题
我在我的React项目中升级了chart.js。在v3.9.1版本中它能够正常工作，但在v4.3.0版本中出现了以下错误：
chart.js:5199 Uncaught TypeError: Cannot read properties of undefined (reading 'axis')
at determineAxis (chart.js:5199:1)
at eval (chart.js:5237:1)
at Array.forEach (<anonymous>)
at mergeScaleConfig (chart.js:5229:1)
at initOptions (chart.js:5279:1)
at initConfig (chart.js:5290:1)
at new Config (chart.js:5312:1)
at new Chart (chart.js:5593:1)
at eval (ActivityChart.tsx:65:1)
at invokePassiveEffectCreate (react-dom.development.js:23487:1)
我完全不知道为什么会发生这种情况以及如何修复它。
我的当前代码在v3.9.1版本上能够正常工作：
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
if (chartRef.current) {
chartRef.current.destroy();
}
chartRef.current = new Chart(ctx, {
type: 'bar',
data: {
labels,
datasets: [
{
label: 'Month 1',
data: WLossData as any,
backgroundColor: colors.GraphBlue,
},
],
},
plugins: [ChartDataLabels],
options: {
// 其他部分未提供，保留原样
},
});
});
我尝试使用不同版本的chart.js v4.x，但它们都显示了我提到的错误。而且我在文档中找不到任何可以帮助解决这个问题的信息。
英文:
I'm upgrading my chart.js in my React project, it was working fine in v3.9.1 but in the v4.3.0 I'm getting the following error:
chart.js:5199 Uncaught TypeError: Cannot read properties of undefined (reading 'axis')
at determineAxis (chart.js:5199:1)
at eval (chart.js:5237:1)
at Array.forEach (<anonymous>)
at mergeScaleConfig (chart.js:5229:1)
at initOptions (chart.js:5279:1)
at initConfig (chart.js:5290:1)
at new Config (chart.js:5312:1)
at new Chart (chart.js:5593:1)
at eval (ActivityChart.tsx:65:1)
at invokePassiveEffectCreate (react-dom.development.js:23487:1)
I have no idea why this is happening in how to fix it.
My current code, that's working on v3.9.1
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
if (chartRef.current) {
chartRef.current.destroy();
}
chartRef.current = new Chart(ctx, {
type: 'bar',
data: {
labels,
datasets: [
{
label: 'Month 1',
data: WLossData as any,
backgroundColor: colors.GraphBlue,
},
],
},
plugins: [ChartDataLabels],
options: {
responsive: true,
maintainAspectRatio: isMobile,
layout: {
padding: {
left: 0,
right: 0,
top: isMobile ? 15 : 25,
bottom: 0,
},
},
scales: {
title: {
display: false,
},
x: {
display: true,
title: {
display: true,
text: intl.formatMessage({ id: messages.monthsInto.id }),
font: {
size: isMobile ? 10 : 13,
family: 'GT-America-Standard-Regular',
},
color: colors.DarkSilver,
padding: isMobile ? 5 : 20,
},
ticks: {
display: true,
// userCallback: function (item, index) {
// return null;
// },
},
grid: {
display: false,
drawBorder: true,
},
},
y: {
title: {
display: false,
},
beginAtZero: true,
ticks: {
display: false,
callback: (item: number | string) =>
// this only allows the first/base horizontal line
item === 0 ? item : null,
},
grid: {
display: true,
drawBorder: false,
},
},
},
plugins: {
// @ts-ignore
datalabels: {
display: true,
align: 'center',
anchor: 'center',
color: '#ffffff',
font: {
weight: 'bold',
size: 11,
},
labels: {
value: {
font: {
weight: 'bold',
family: 'GT-America-Standard-Medium',
},
},
},
formatter(value: number | string) {
return `${value}%`;
},
},
legend: {
display: false,
},
tooltip: {
...baseTooltip,
intersect: true,
mode: 'nearest',
callbacks: {
title: () => null,
label: (tooltipItem) => `${tooltipItem.parsed.y}%`,
},
},
},
},
});
});
I've tried to use different versions of chart.js v4.x, but all of them is showing the error that I mentioned.
Also I didn't find anything in the documentation that could help deal with this issue.
答案1
得分: 1
我不100%确定为什么您的代码不起作用，但我已经测试过了，如果您从配置属性scales中删除title属性，图表应该可以渲染。文档中也没有显示scales配置的title属性。
英文:
I'm not 100% percent sure why your code doesn't work, but tested it, if you remove the property title from the config-property scales, and the chart should render. The documentation also doesn't show a property title for the scales configuration.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论