import { render } from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
const LineChart = () => {
const [chartOptions, setChartOptions] = useState({
series: [{ data: [1, 2, 3] }]
});
const [intervalRef, setIntervalRef] = useState(null);
function toggleLiveData() {
if (!intervalRef) {
setIntervalRef(setInterval(() => {
console.log("add");
setChartOptions((state) => ({
series: [
{
data: [...state.series[0].data, Math.random()]
}
]
}));
}, 500));
} else {
clearInterval(intervalRef);
setIntervalRef(null);
}
}
function handleClick() {
toggleLiveData();
}
return (
<div>
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
<button onClick={handleClick}>toggle live data</button>
</div>
);
};
render(<LineChart />, document.getElementById("root"));
This code dynamically adds points to the chart. It adds the new point every 1/2second and after a point it just clutters the graph how do I remove the extra points and only keep 10 points on the screen at once?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…