реактивная диаграмма: все значения в event.point равны нулю - PullRequest
Новая
       5

реактивная диаграмма: все значения в event.point равны нулю

0 голосов
/ 23 января 2020

Я использую response-highchart-official в моем проекте. Мне нужно получить некоторые значения из события click. В компоненте прослушиватель событий устанавливается с помощью plotOptions следующим образом: 

plotOptions: {
        series: {
          point: {
            events: {
              click: event => {
                this.props.onClick && this.props.onClick(event);
              }
            }
          }
        }
      }

Он вызывается с помощью объекта event, который содержит запись point. point содержит полезную информацию о диаграмме.

Компонент диаграммы используется как: 

import React from 'react';
import { render } from 'react-dom';
// Import Highcharts
import Highcharts from 'highcharts';

// Import our demo components
import Chart from './components/Chart.jsx';

// Load Highcharts modules
require('highcharts/modules/exporting')(Highcharts);

const chartOptions = {
  title: {
    text: ''
  },
  series: [
    {
      data: [[1, 'Highcharts'], [1, 'React'], [3, 'Highsoft']],
      keys: ['y', 'name'],
      type: 'pie'
    }
  ]
};

class App extends React.Component {
  state = { flag: true };

  onChartClick(event) {
    // All values of event.point are null. Not sure why.
    // Even though it's not a synthetic event.
    console.log(event.point);
    this.setState({ flag: false });

  }

  render() {
    const { flag } = this.state;
    return (
      <div>
        <h1>Demos</h1>
        <h2>Highcharts</h2>
        {flag && (
          <Chart
            highcharts={Highcharts}
            onClick={this.onChartClick.bind(this)}
          />
        )}
      </div>
    );
  }
}

По некоторым неизвестным причинам все значение в point свойстве клика event равно установите в ноль, если я скрываю график. Есть ли способ, которым я могу избежать этого? В реальном проекте на графике click мне нужно куда-то перенаправить пользователя. Чтобы имитировать ситуацию, я спрятал график.

Codesandbox

1 Ответ

1 голос
/ 23 января 2020

Эта ситуация точно показывает, что произошло с вашими точечными данными, см .:

Демонстрация: https://jsfiddle.net/BlackLabel/o70mLrnt/

var chart = Highcharts.chart('container', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

console.log(chart.series[0].points[1])
chart.destroy();

Установка флажка на ложь при отключении компонента который разрушает диаграмму, а затем console.log не имеет «доступа» к диаграмме и определенным свойствам точки.

Если вам нужно всего лишь несколько данных из точки, хорошим вариантом будет установить их в состоянии до флаг будет изменен.

Вот так - это сохранит вашу точку y. 

this.setState({
  pointValue: event.point.y
});

Другое решение, которое мне пришло в голову, состоит в том, чтобы установить для целого точечного объекта некоторую переменную, но здесь необходимо использовать setTimeout.

Демонстрация с решением setState и сохранение объекта в переменная: https://codesandbox.io/s/highcharts-react-demo-dnbdv

...