Question

我有一个反应力高的图表图表和一个显示相同数据的表格，并且我试图在两个组件中显示相同的所选项目。因此，当表中的一行突出显示时，相应的列应更改边框颜色。

通过设置这样的状态，我设法从图表的click事件中更新了表

const plotOptions = {
  series: {
    point: {
      events: {
        click: e => this.setState({selectedColumn: e.point.x})
      }
    }
  }
}

<HighchartsChart plotOptions={plotOptions}>
...
</HighchartsChart >

但是我不知道如何使用state属性更新图表。

我曾经尝试在highchart文档中寻找selected属性，但没有找到任何能解决我问题的方法。

Answer 1

您需要在与单击的Tabable单元格相关的点上使用select方法。请看下面的例子：

handleClick(e) {
  let index = Number(e.currentTarget.innerHTML);
  this.setState({ index: index });
  this.chart.series[0].points[index].select();
}

实时演示：https://codesandbox.io/s/61zx86993

React Highcharts从本地状态更改所选列的边框颜色

1 个答案: