无法让Remix.run和Chart.js一起正常工作，我做错了什么？

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

Can't get Remix.run and Chart.js to work together, what am I doing wrong?

问题

I'm facing a problem with Remix.run and chart.js (react-chartjs-2) where I try and get the chart to show.

我在使用 Remix.run 和 chart.js (react-chartjs-2) 时遇到了一个问题，我试图让图表显示出来。

I installed the required dependencies according to the docs: react-chartjs-2 and chart.js.

根据文档，我安装了所需的依赖项：react-chartjs-2 和 chart.js。

Extract from package.json:

从 package.json 中提取的部分：

  1. "chart.js": "^4.0.0",
  2. "react-chartjs-2": "^5.0.0",

I decided to get the example from docs:

我决定从文档中获取示例代码：

  1. import {
  2.   Chart as ChartJS,
  3.   CategoryScale,
  4.   LinearScale,
  5.   PointElement,
  6.   LineElement,
  7.   Title,
  8.   Tooltip,
  9.   Legend,
  10. } from 'chart.js/auto';
  11. import { Line } from 'react-chartjs-2';
  12. import faker from 'faker';
  14. ChartJS.register(
  15.   CategoryScale,
  16.   LinearScale,
  17.   PointElement,
  18.   LineElement,
  19.   Title,
  20.   Tooltip,
  21.   Legend
  22. );
  24. export const options = {
  25.   responsive: true,
  26.   plugins: {
  27.     legend: {
  28.       position: 'top' as const,
  29.     },
  30.     title: {
  31.       display: true,
  32.       text: 'Chart.js Line Chart',
  33.     },
  34.   },
  35. };
  37. const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  39. export const data = {
  40.   labels,
  41.   datasets: [
  42.     {
  43.       label: 'Dataset 1',
  44.       data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
  45.       borderColor: 'rgb(255, 99, 132)',
  46.       backgroundColor: 'rgba(255, 99, 132, 0.5)',
  47.     },
  48.     {
  49.       label: 'Dataset 2',
  50.       data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
  51.       borderColor: 'rgb(53, 162, 235)',
  52.       backgroundColor: 'rgba(53, 162, 235, 0.5)',
  53.     },
  54.   ],
  55. };
  57. export default function App() {
  58.   return <Line options={options} data={data} />;
  59. }

The code simply doesn't seem to be doing anything, however I could spot a little canvas element when I inspected the element.

然而，这段代码似乎没有做任何事情，但当我检查元素时，我能够看到一个小的 canvas 元素。

I then took the same as above, created a new react app with create-react-app and it worked. So my assumption is that Remix is the issue here. What causes this problem?

然后，我使用与上述相同的代码，在使用 create-react-app 创建了一个新的 React 应用，它正常工作。因此，我的假设是 Remix 在这里存在问题。这个问题是由什么引起的？

英文:

I'm facing a problem with Remix.run and chart.js (react-chartjs-2) where I try and get the chart to show.

I installed the required dependencies according to the docs: react-chartjs-2 and chart.js.

Extract from package.json:

  1. &quot;chart.js&quot;: &quot;^4.0.0&quot;,
  2. &quot;react-chartjs-2&quot;: &quot;^5.0.0&quot;,

I decided to get the example from docs:

  1. import {
  2. Chart as ChartJS,
  3. CategoryScale,
  4. LinearScale,
  5. PointElement,
  6. LineElement,
  7. Title,
  8. Tooltip,
  9. Legend,
  10. } from &#39;chart.js/auto&#39;;
  11. import { Line } from &#39;react-chartjs-2&#39;;
  12. import faker from &#39;faker&#39;;
  13. ChartJS.register(
  14. CategoryScale,
  15. LinearScale,
  16. PointElement,
  17. LineElement,
  18. Title,
  19. Tooltip,
  20. Legend
  21. );
  22. export const options = {
  23. responsive: true,
  24. plugins: {
  25. legend: {
  26. position: &#39;top&#39; as const,
  27. },
  28. title: {
  29. display: true,
  30. text: &#39;Chart.js Line Chart&#39;,
  31. },
  32. },
  33. };
  34. const labels = [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;];
  35. export const data = {
  36. labels,
  37. datasets: [
  38. {
  39. label: &#39;Dataset 1&#39;,
  40. data: labels.map(() =&gt; faker.datatype.number({ min: -1000, max: 1000 })),
  41. borderColor: &#39;rgb(255, 99, 132)&#39;,
  42. backgroundColor: &#39;rgba(255, 99, 132, 0.5)&#39;,
  43. },
  44. {
  45. label: &#39;Dataset 2&#39;,
  46. data: labels.map(() =&gt; faker.datatype.number({ min: -1000, max: 1000 })),
  47. borderColor: &#39;rgb(53, 162, 235)&#39;,
  48. backgroundColor: &#39;rgba(53, 162, 235, 0.5)&#39;,
  49. },
  50. ],
  51. };
  52. export default function App() {
  53. return &lt;Line options={options} data={data} /&gt;;
  54. }

The code simply doesn't seem to be doing anything, however I could spot a little canvas element when I inspected the element.

I then took the same as above, created a new react app with create-react-app and it worked. So my assumption is that Remix is the issue here. What causes this problem?

答案1

得分: 0

这里是使用 Remix 的 Chart.js 示例。

无法让Remix.run和Chart.js一起正常工作，我做错了什么？

英文:

Here's a sample using Chart.js with Remix.

https://stackblitz.com/edit/remix-run-remix-dbe16z?file=README.md

Since Remix renders your components on the server as well as the client, some React components are not SSR-friendly. They may try to access the window object, for example.

We wrap the chart components inside the &lt;ClientOnly&gt; component from remix-utils.

无法让Remix.run和Chart.js一起正常工作，我做错了什么？

huangapple
  • 本文由 发表于 2023年5月28日 18:55:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76351117.html
  • chart.js
  • react-chartjs-2
  • reactjs
  • remix.run
  • typescript
匿名

发表评论

匿名网友

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

确定