英文:
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 中提取的部分：
"chart.js": "^4.0.0",
"react-chartjs-2": "^5.0.0",
I decided to get the example from docs:
我决定从文档中获取示例代码：
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js/auto';
import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export default function App() {
return <Line options={options} data={data} />;
}
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:
"chart.js": "^4.0.0",
"react-chartjs-2": "^5.0.0",
I decided to get the example from docs:
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js/auto';
import { Line } from 'react-chartjs-2';
import faker from 'faker';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
export const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
},
{
label: 'Dataset 2',
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
],
};
export default function App() {
return <Line options={options} data={data} />;
}
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 示例。
英文:
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 <ClientOnly> component from remix-utils.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论