React-highcharts：我遇到了“渲染器”问题，需要一种在函数调用时更新“状态”的方法

Question

我在state应用中遇到了react的示波器问题。

我在高级图表组件顶部的chart组件中添加了一些按钮。现在，我想在图表空间内（标题下）添加这些按钮以节省一些空间。

我在较旧的帖子和论坛上找到的解决方案是使用此方法：

chart.events.render(this.renderer.button.add())

我不确定是否不赞成使用此方法而赞成SVGRenderer。

我的方法是

chart: {
    events: {
      render() {
        let chart = this;

        console.log("this chart", chart);
        const handlePeriodClick = (periodType) => {
          const filteredData = chart.options.data.map((option) =>({
            ...option,
            data: option.data.filter((item) =>
              moment(item[0]).diff(moment(item[0]).endOf(periodType), 'days') === 0)
          }));
          // need to acces states from React within Highchart.chart component
          this.setState({ filteredData });
        };

        chart.renderer.button('D',10, 55)
          .on('click', function () {
            handlePeriodClick('day');
          })
          .add();
        chart.renderer.button('W',35, 55)
          .on('click', function () {
            handlePeriodClick('week');
          })
          .add();
        chart.renderer.button('M',60, 55)
          .on('click', function () {
            handlePeriodClick('month');
          })
          .add();
      }
    }
  },

我需要在该函数调用内更新state，以反映data更新。在我的本地项目中，renderer调用正在运行，我不知道为什么它在demo上无法运行。

我也曾尝试使用SVGRenderer而不是renderer，但无法使其正常工作。

Answer 1

您的演示中发生了很多事情，我不清楚您想要实现什么，但是看来[[render回调从未触发-此console.log("this chart", chart);不会出现。

以下是有关如何在已渲染按钮的自定义功能中更改状态的建议。

定义函数和变量以将其附加到范围之外。

演示：https://codesandbox.io/s/highcharts-react-demo-1fm35?file=/demo.jsx

如果您只想更改数据，也可以使用
2. series.update

Highcharts功能-不会出现范围问题。演示：https://codesandbox.io/s/highcharts-react-demo-11mpt