reactjs - 圆环图 : Trigger legend or pie click event while selecting outside filter state change

Question

请看这个截图

当我单击图例项时，饼图将在 react js 中突出显示或选中

但是当我从自定义过滤器状态触发图例点击时，饼图没有被选中

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