react-chartjs-2不显示曲线

Question

我使用react-chart-js 2以散点图形式显示连续数据。我想把选项放在图表上，但其中一些不能正常工作或根本不能工作。所以我对以下选项有问题:点之间的线不是弯曲的，有直线。

已安装的react-chart-js 2版本为:5.2.0,chartJS版本为:4.1.2。

What i have try:

我尝试修改选项中的参数曲线(元素:{line: {tension: 0.1,spanGaps: false}})，但它没有工作。

代码如下:

App.js:

import React, { useState, useEffect, useRef, useSyncExternalStore } from 'react';
import Modal from './Modal/Modal'
import {Chart as ChartJS,LinearScale,PointElement,LineElement,Tooltip,Legend,Title,scales} from 'chart.js';
import {Scatter } from 'react-chartjs-2';
ChartJS.register(
LinearScale,
PointElement,
LineElement,
Tooltip,
Legend,
Title);
//JSON.parse(event.data)
//<Doughnut ref={chartReference} data={data} />
export const options1 = {
responsive: true,
maintainAspectRatio:false,
plugins: {
legend: false,
title: {
display:true,
text: 'TWIST',
},
},
};

export default function App() {
let da;
const [data, setData] = useState(null);
const [chartData1,setChartData1]=useState({
datasets: [
{
label: 'Twist',
showLine:true,
maintainAspectRatio:false,
fill:false,
data: [{x:3,y:1},{x:3.5,y:2},{x:5.5,y:3},{x:5.25,y:4},{x:5,y:5}],
backgroundColor: '#df9305',
borderColor: '#df9305'
}]
});
const [show,setShow] = useState(false);
const chart1=(d) =>{
setChartData1({
datasets: [
{
label: 'Twist',
showLine:true,
fill:false,
data: d,
backgroundColor: '#df9305',
borderColor: '#df9305'
}]
});
};
console.log(data)
useEffect(() => {
const socket = new WebSocket('ws://localhost:8000');
socket.addEventListener('message', (event) => {
setData(JSON.parse(event.data));
da=[{x:JSON.parse(event.data)["fs"]["s1"]["twist"],y:1},
{x:JSON.parse(event.data)["fs"]["s2"]["twist"],y:2},
{x:JSON.parse(event.data)["fs"]["s3"]["twist"],y:3},
{x:JSON.parse(event.data)["fs"]["s4"]["twist"],y:4},
{x:JSON.parse(event.data)["fs"]["s5"]["twist"],y:5}];
chart1(da);
});
}, []);


return (
<div>
<div className="home">
<div className="template-1" id="temp1">
<div class="panel-3">
<div class="panel-header">
<h1>Courbes</h1>
<i class='bx bx-cog modal-trigger-panel'></i>
</div>
<div class="panel-body" >
<div class="graph-container" style={{display: "flex", flexDirection: "row",height: "100%",width:"100%"}}>
<div style={{width: "25%",height: "100%"}}>
<Scatter options={options1} data={chartData1} />
</div>
</div>
</div>
</div>
</div>
</div>
<Modal onClose={() => setShow(false)} show={show} />
</div>
);
}

问候,

Answer 1

好吧，这个花了一点时间，但我弄明白了。我不用摇树就解决了这就是我要展示的，你当然可以加上摇树，但我认为这可能是给你带来麻烦的一部分。要惰性加载，只需执行

import 'chart.js/auto';
import { Scatter } from 'react-chartjs-2';

然后我相信你已经试过把这个添加到options

elements: {
line: {
tension: 0.5,
},
},

这种方式只是注册所有可能的可注册项，这会增加包的大小，这可以在chart.js/auto

中看到。

import {Chart, registerables} from '../dist/chart.js';
Chart.register(...registerables);
export * from '../dist/chart.js';
export default Chart;

我们可以看到它导入了所有可注册的项，然后注册了它们。

Tree-shakable方式要减小包的大小，您可以选择手动注册。您的图表所需的最小注册表为

import {
Chart as ChartJS,
LineElement,
PointElement,
Filler,
LinearScale,
} from 'chart.js';
import { Scatter } from 'react-chartjs-2';
ChartJS.register(LineElement, PointElement, Filler, LinearScale);

如果你想要可摇树的方式，但很难确定你需要哪些可注册的，虽然繁琐的方法，只是添加所有可注册的，删除一个，并检查一切仍按预期工作，然后对所有可注册的这样做。如果你想这样做，你总是可以使用chart.js/auto，然后在你完成功能时纠正它，这样你就不必在每次添加新功能时都担心它。这就是我能想到的所有闲扯，希望能有所帮助:-)