如何解决更改数据后重新绘制动态图表
我需要你的帮助。我试图根据您单击的选项卡显示不同的唐莴苣。看到这里:
[图表1] [1] [1]:https://i.stack.imgur.com/In82n.png
如您所见,它最初会加载。但是当我单击选项卡时,它不再显示任何图表:
[图表2] [2] [2]:https://i.stack.imgur.com/9Xj3K.png
即使当我回到数据1时,图形也消失了:
[再次重新显示图表1] [3] [3]:https://i.stack.imgur.com/hCnHu.png
即使当我回到数据1时,图形也消失了: 我与React开发人员核对了chartData是否正确更改,现在已经失去了构想。我希望有人能帮助我。
这是沙盒链接:https://codesandbox.io/s/recharts-dynamic-lines-hcrpm?file=/src/charts.js
和代码:
const buildChartHtml = () => {
let elements = [];
if (activeType === 0) {
elements.push(<XAxis dataKey="day" type="number" tickCount={11} label={CHART_INFO[activeType].xAxis_label} />);
elements.push(<YAxis type="number" label={CHART_INFO[activeType].yAxis_label} />);
elements.push(<Line data={chartData} dataKey={CHART_INFO[activeType].dataKey} stroke="#FF3333" dot={false} strokeWidth={2} legendType="square" />);
elements.push(<Line type="linear" data={testline} dataKey="y" stroke="#0000ce" dot={false} strokeWidth={2} legendType="square" />);
} else if (activeType === 1) {
elements.push(<XAxis dataKey="day" type="number" tickCount={11} label={CHART_INFO[activeType].xAxis_label} />);
elements.push(<YAxis type="number" label={CHART_INFO[activeType].yAxis_label} />);
elements.push(<Line data={chartData} dataKey={CHART_INFO[activeType].dataKey} stroke="#FF3333" dot={false} strokeWidth={2} legendType="square" />);
elements.push(<ReferenceLine y="1000" label={{ position: "center",value: "Max Budget" }} />);
}
setChartHTML(elements);
};
// render onMount
useEffect(() => {
//check which type of process is run
setChartData(buildChartData());
buildChartHtml();
},[]);
// change chartData when activeType is changed
useEffect(() => {
//check which type of process is run
if (activeType === 0 && chartData.length > 1) {
setChartData(data1);
buildChartHtml();
}
if (activeType === 1) {
setChartData(data2);
buildChartHtml();
}
// console.log("activeType: " + activ ta))
},[activeType]);
JSX:
return (
<div>
<AntTabs value={value} onChange={handleChangeTabs}>
{CHART_INFO.map((item,index) => (
<Tab label={item.name} onClick={() => [setActiveType(item.id),setActiveIndex(index)]} />
))}
</AntTabs>
<LineChart key={CHART_INFO[activeType].dataKey} width={500} height={300} margin={{ top: 5,right: 20,bottom: 5,left: 0 }}>
<Legend verticalAlign="top" />
<Tooltip />
{chartHTML}
</LineChart>
</div>
);>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。