Chart.js从v3迁移到v4后出现类型错误。

huangapple
go评论99阅读模式
英文:

Chart.js type error after migration v3 to v4

问题

我在我的React项目中升级了chart.js。在v3.9.1版本中它能够正常工作，但在v4.3.0版本中出现了以下错误：

  1. chart.js:5199 Uncaught TypeError: Cannot read properties of undefined (reading 'axis')
  2.     at determineAxis (chart.js:5199:1)
  3.     at eval (chart.js:5237:1)
  4.     at Array.forEach (<anonymous>)
  5.     at mergeScaleConfig (chart.js:5229:1)
  6.     at initOptions (chart.js:5279:1)
  7.     at initConfig (chart.js:5290:1)
  8.     at new Config (chart.js:5312:1)
  9.     at new Chart (chart.js:5593:1)
  10.     at eval (ActivityChart.tsx:65:1)
  11.     at invokePassiveEffectCreate (react-dom.development.js:23487:1)

我完全不知道为什么会发生这种情况以及如何修复它。

我的当前代码在v3.9.1版本上能够正常工作：

  1.   useEffect(() => {
  2.     const ctx = canvasRef.current.getContext('2d');
  4.     if (chartRef.current) {
  5.       chartRef.current.destroy();
  6.     }
  7.     chartRef.current = new Chart(ctx, {
  8.       type: 'bar',
  9.       data: {
  10.         labels,
  11.         datasets: [
  12.           {
  13.             label: 'Month 1',
  14.             data: WLossData as any,
  15.             backgroundColor: colors.GraphBlue,
  16.           },
  17.         ],
  18.       },
  19.       plugins: [ChartDataLabels],
  20.       options: {
  21.         // 其他部分未提供，保留原样
  22.       },
  23.     });
  24.   });

我尝试使用不同版本的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:

  1. chart.js:5199 Uncaught TypeError: Cannot read properties of undefined (reading &#39;axis&#39;)
  2.     at determineAxis (chart.js:5199:1)
  3.     at eval (chart.js:5237:1)
  4.     at Array.forEach (&lt;anonymous&gt;)
  5.     at mergeScaleConfig (chart.js:5229:1)
  6.     at initOptions (chart.js:5279:1)
  7.     at initConfig (chart.js:5290:1)
  8.     at new Config (chart.js:5312:1)
  9.     at new Chart (chart.js:5593:1)
  10.     at eval (ActivityChart.tsx:65:1)
  11.     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

  1.   useEffect(() =&gt; {
  2.     const ctx = canvasRef.current.getContext(&#39;2d&#39;);
  4.     if (chartRef.current) {
  5.       chartRef.current.destroy();
  6.     }
  7.     chartRef.current = new Chart(ctx, {
  8.       type: &#39;bar&#39;,
  9.       data: {
  10.         labels,
  11.         datasets: [
  12.           {
  13.             label: &#39;Month 1&#39;,
  14.             data: WLossData as any,
  15.             backgroundColor: colors.GraphBlue,
  16.           },
  17.         ],
  18.       },
  19.       plugins: [ChartDataLabels],
  20.       options: {
  21.         responsive: true,
  22.         maintainAspectRatio: isMobile,
  23.         layout: {
  24.           padding: {
  25.             left: 0,
  26.             right: 0,
  27.             top: isMobile ? 15 : 25,
  28.             bottom: 0,
  29.           },
  30.         },
  31.         scales: {
  32.           title: {
  33.             display: false,
  34.           },
  35.           x: {
  36.             display: true,
  37.             title: {
  38.               display: true,
  39.               text: intl.formatMessage({ id: messages.monthsInto.id }),
  40.               font: {
  41.                 size: isMobile ? 10 : 13,
  42.                 family: &#39;GT-America-Standard-Regular&#39;,
  43.               },
  44.               color: colors.DarkSilver,
  45.               padding: isMobile ? 5 : 20,
  46.             },
  47.             ticks: {
  48.               display: true,
  49.               // userCallback: function (item, index) {
  50.               //   return null;
  51.               // },
  52.             },
  53.             grid: {
  54.               display: false,
  55.               drawBorder: true,
  56.             },
  57.           },
  58.           y: {
  59.             title: {
  60.               display: false,
  61.             },
  62.             beginAtZero: true,
  63.             ticks: {
  64.               display: false,
  66.               callback: (item: number | string) =&gt;
  67.                 // this only allows the first/base horizontal line
  68.                 item === 0 ? item : null,
  69.             },
  70.             grid: {
  71.               display: true,
  72.               drawBorder: false,
  73.             },
  74.           },
  75.         },
  76.         plugins: {
  77.           // @ts-ignore
  78.           datalabels: {
  79.             display: true,
  80.             align: &#39;center&#39;,
  81.             anchor: &#39;center&#39;,
  82.             color: &#39;#ffffff&#39;,
  83.             font: {
  84.               weight: &#39;bold&#39;,
  85.               size: 11,
  86.             },
  87.             labels: {
  88.               value: {
  89.                 font: {
  90.                   weight: &#39;bold&#39;,
  91.                   family: &#39;GT-America-Standard-Medium&#39;,
  92.                 },
  93.               },
  94.             },
  95.             formatter(value: number | string) {
  96.               return `${value}%`;
  97.             },
  98.           },
  99.           legend: {
  100.             display: false,
  101.           },
  102.           tooltip: {
  103.             ...baseTooltip,
  104.             intersect: true,
  105.             mode: &#39;nearest&#39;,
  106.             callbacks: {
  107.               title: () =&gt; null,
  108.               label: (tooltipItem) =&gt; `${tooltipItem.parsed.y}%`,
  109.             },
  110.           },
  111.         },
  112.       },
  113.     });
  114.   });

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.

huangapple
  • 本文由 发表于 2023年7月3日 22:39:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76605795.html
  • chart.js
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定