如何将Material UI滑块与图表js集成

Question

如何将Material UI滑块与图表js集成， 当我滑动Material UI滑块时，我想在工具提示突出显示的图表js中移动x轴值。我正在使用折线图

Answer 1

当Slider改变时，它会调用提供给onChange prop的函数：

handleChange = (event, value) => {
  // do something
};

render() {
  return (
    <Slider onChange={this.handleChange} />
  )
}

在handleChange事件中，您可以update the chart data使用新值。

您需要注意图表为outside the React DOM tree。

如果您使用了诸如react-chart-2之类的chart.js的包装器组件，则可以使用props或状态管理库（如Redux）将数据传递到图表，就像任何其他React组件一样。 / p>