Кольцевая диаграмма: триггерная легенда или событие щелчка при выборе внешнего изменения состояния фильтра

Question

Пожалуйста, смотрите этот скриншот

1. Когда я нажимаю на элемент легенды, круг будет выделен или выбран в реакции js
2. но когда я запускаю щелчок легенды из состояния пользовательского фильтра, круговая диаграмма не выбирается

Может кто-нибудь поделиться каким-либо решением для реакции js на запуск легенды и выбор круговой диаграммы из внешнего фильтра

Answer 1

Вам необходимо использовать метод setVisible для серии, связанной с определенной кнопкой:

handleClick(e) {
  const series = this.internalChart.series;

  series[e.currentTarget.attributes.index.value].setVisible();
}

render() {
  return (
    <div>
      <HighchartsReact
        highcharts={Highcharts}
        options={this.state.chartOptions}
        callback={this.afterChartCreated}
      />
      <h2>custom legend</h2>
      <div>Series 1
        <input
          type="checkbox"
          index="0"
          onChange={this.handleClick.bind(this)}
          defaultChecked={true}
        />
        ...
      </div>
    </div>
  );
}

Демонстрационная версия: https://codesandbox.io/s/91opxqwn1r

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible

Документы: https://github.com/highcharts/highcharts-react/blob/master/README.md