甜甜圈图：选择外部过滤器状态更改时触发图例或饼图单击事件

Question

请查看此屏幕截图

1. 当我单击图例项目时，饼图将突出显示或在react js中选择
2. 但是当我从自定义过滤器状态触发图例点击时，饼图未被选中

有人可以分享任何React 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