reactjs - 轻量级图表反应

Question

我需要 React Lightweight 图表方面的帮助，目前我在我的项目中使用 3 种类型的图表，即区域、蜡烛、条形图。我们在前端有按钮可以在它们之间切换。因此，从蜡烛切换到区域和 Vica Versa 工作正常，但是当从蜡烛切换到条形图时，它没有在图表中显示条形系列，即使我已经移除了蜡烛系列，它也在显示蜡烛系列。

当我在条形系列中设置静态数据时，它工作正常，但当我设置动态数据时，它显示蜡烛系列而不是条形系列。我不知道问题是什么，任何人都可以请帮助我我也可以分享一个代码片段

  const { symbol, interval, range, height, width, name, chartOptions } = props;
  const [data, setData] = useState();
  const [chart, setChart] = useState();
  const [chartDimensions, setChartDimensions] = useState({ height, width });
  const [series, setSeries] = useState({ candlestick: null, volume: null });
  const [areaSeriesState, setAreaSeries] = useState({ areastick: null });
 const [barSeriesState, setBarSeries] = useState({ barstick: null });

 useEffect(() => {
if (data !== undefined) {
  if (series.candlestick !== null && chart.volume !== null) {
    chart.removeSeries(series.candlestick);
    chart.removeSeries(series.volume);
  }
  if (areaSeriesState.areastick !== null) {
    chart.removeSeries(areaSeriesState.areastick);
  }
  if (barSeriesState.barstick !== null) {
    chart.removeSeries(barSeriesState.barstick);
  }
  if (chartOptions.area) {
    if (series.candlestick !== null && chart.volume !== null) {
      setSeries({ candlestick: null, volume: null });
    }
    if (barSeriesState.barstick !== null) {
      setBarSeries({ barstick: null });
    }
    _.map(data, (candleData) => {
      areaData.push({
        time: candleData.time,
        value: candleData.close
      });
    });
    const areaSeries = chart.addAreaSeries({
      lineColor: "#66b5bd"
    });
    setAreaSeries({ areastick: areaSeries });
    // set the data
    areaSeries.setData(areaData);
  } else if (chartOptions.bar) {
    if (series.candlestick !== null && chart.volume !== null) {
      setSeries({ candlestick: null, volume: null });
    }
    if (areaSeriesState.areastick !== null) {
      setAreaSeries({ areastick: null });
    }
    _.map(data, (bar) => {
      barData.push({
        time: bar.time,
        open: bar.open,
        high: bar.high,
        low: bar.low,
        close: bar.low
      });
      return barData;
    });
    const barSeries = chart.addBarSeries({
      thinBars: false
    });
    setBarSeries({ barstick: barSeries });
    barSeries.setData(barData);
  } else {
    if (areaSeriesState.areastick !== null) {
      setAreaSeries({ areastick: null });
    }
    if (barSeriesState.barstick !== null) {
      setBarSeries({ barstick: null });
    }
    const volumeSeries = chart.addHistogramSeries({
      priceFormat: {
        type: "volume"
      },
      overlay: true,
      scaleMargins: {
        top: 0.7,
        bottom: 0
      }
    });
    // console.log("data before use is", data);
    volumeSeries.setData(
      data.map(({ time, volume, open, close }) => ({
        time,
        value: volume,
        color:
          close >= open ? "rgba(38,166,154,0.4)" : "rgba(239,83,80,0.4)"
      }))
    );
    const candlestickSeries = chart.addCandlestickSeries();
    candlestickSeries.setData(data);
    setSeries({ candlestick: candlestickSeries, volume: volumeSeries });
  }
  chart.timeScale().fitContent();
}
},[data, chart, chartOptions.area, chartOptions.candles,chartOptions.bar]);