更改数据后重新绘制动态图表

问题描述

我需要你的帮助。我试图根据您单击的选项卡显示不同的唐莴苣。看到这里：

[图表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 (将#修改为@）