Apexcharts - ReactJs - 实时 - 无法读取未定义的属性“过滤器”答案

【问题标题】：Apexcharts - ReactJs - real time - Cannot read property 'filter' of undefinedApexcharts - ReactJs - 实时 - 无法读取未定义的属性“过滤器”
【发布时间】：2020-11-26 02:16:59
【问题描述】：

我有一个在合成器（钩子）中创建的图表：

return (
<div id="chart-candlestick">
    <ReactApexChart options={optionsCandles} series={seriesCandles} type="candlestick"
                    height={290}/>
</div>)

我尝试添加值来测试实时可能性。（没有它，它工作正常！）我的问题是我尝试了几个小时并没有找到为什么我会出现这个异常。

所以，我在选项中命名了我的图表（“蜡烛”）：

{
    chart: {
        type: 'candlestick',
        height: 290,
        id: 'candles'   
        {...}
    },
    {...}
}

因此，我不时尝试使用 ApexCharts 的 exec 方法手动添加更多数据：

function fetchLastDatas() { 
    const date = dateAdd(candleDatas[candleDatas.length - 1].x,"minute",5)
    var obj = {
        x: date,
        y: candleDatas[candleDatas.length - 1].y
    }
    candleDatas.push(obj);

    ApexCharts.exec('candles', 'updateSeries', [{
        data:candleDatas
    }], true)

}

我的数组有数据，但我在“ApexCharts.exec”行有这个异常，我不知道为什么：

Uncaught TypeError: Cannot read property 'filter' of undefined
    at Function.value (apexcharts.common.js:14)
    at Function.value (apexcharts.common.js:14)
    at fetchLastDatas (ChartCaneva.js:178)

我是新来使用这个库（一般是在 React 中）所以感谢您的帮助！

晚安（或早上）！

【问题讨论】：

标签： reactjs filter apexcharts

【解决方案1】：

不久前遇到了类似的错误。

似乎ApexCharts.exec 正在抱怨，因为它正在尝试更新尚未安装的组件（带有id='candles' 的图表）。

您可以尝试在更新功能中添加console.log(document.getElementById('chart-candlestick')) 来检查这一点。

也许在尝试运行任何更新之前尝试添加一个条件来检查组件是否已安装。

useRef?


function fetchLastDatas(chartIsMounted) {
  // ...
  // debug: console.log(document.getElementById('chart-candlesticks'));
  if(chartIsMounted !== null) {
    ApexCharts.exec('candles', 'updateSeries', [{ /* ... */}])
  }
}

function Parent() {
  let chartRef = React.useRef(null);

  React.useEffect(() => {
    fetchLastDatas(chartRef.current);
  }, []);

  return <Child chartRef={chartRef} /> // You could use React.forwardRef instead and pass a `ref` prop
}

function Child({ chartRef }) {
  return <ChartContainer chartRef={chartRef} />;
}

function ChartContainer({ chartRef }) {
  return (
    <div id="chart-candlestick">
      <ReactApexChart id='candles' ref={chartRef} />
    </div>
  );
}

【讨论】：

【解决方案2】：

对不起，我有很多其他问题，所以我没有回复这个问题。在 React 中你通常不需要使用 exec。 Hooks 的修改会自动执行更改。

【讨论】：

【解决方案3】：

我需要更改我的解决答案。

在 React 和 Apex-chart 中，仅当您设置对象的另一个引用时，图表才会刷新选项。就我而言，我尝试使用扩展运算符和 Object.assign。

问题在于图表的选项是一个复杂的对象。所以你需要用一个库或一个自定义函数做一个深拷贝（为了性能，我读过“rfdc”是最好的）

【讨论】：

【解决方案4】：

我已经解决了这个问题，我将import ReactApexChart from 'react-apexcharts' 和import ApexCharts from 'apexcharts' 都导入了，与doc 完全相同

然后我的字符是brush-chart，所以我为两个部分都调用了ApexCharts.exec，如下所示

   ApexCharts.exec(`linechart`, 'updateSeries', [{data: this.state.graphData, }])

   ApexCharts.exec(`area-chart`, 'updateSeries', [{ data: this.state.graphData, }])

【讨论】：