React-highcharts: у меня проблема с «рендерером», и мне нужен способ обновить «состояние» при вызове функции - PullRequest
Новая
       26

React-highcharts: у меня проблема с «рендерером», и мне нужен способ обновить «состояние» при вызове функции

0 голосов
/ 28 апреля 2020

У меня проблема с областью действия 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. Вот рабочая демоверсия .

Я также пытался использовать SVGRenderer вместо renderer, но не смог заставить его работать.

1 Ответ

1 голос
/ 29 апреля 2020

Многое происходит в вашей демонстрации, и я не совсем понимаю, чего вы хотите достичь, но кажется, что рендер обратный вызов никогда не запускается - этот console.log("this chart", chart); не отображается.

Ниже приведены мои советы о том, как изменить состояние пользовательских функций в отображаемых кнопках.

  1. Определите функцию и переменную, чтобы прикрепить ее вне области действия.

Демо: https://codesandbox.io/s/highcharts-react-demo-1fm35?file= / demo.jsx

Если вы хотите изменить только данные, вы можете сделать это также с помощью функции series.update Highcharts - проблем с областью не будет.

Демонстрация: https://codesandbox.io/s/highcharts-react-demo-11mpt

...