如何在 reactjs 中为 HighChart StockChart 实现日期选择器（没有 jQuery）

Question

我一直在 React 应用程序中使用 highcharts，并且对两者都比较陌生。我的目标中最后遗漏的部分是将日历弹出窗口挂接到股票图表中的日期选择范围。没有 jQuery。有几个例子接近我想要的。

Post 链接到 jQuery 的使用：HighChart Support - jQuery example

Post 链接使用 react-day-picker outside the chart: Post found on the HighChart support forum

我所做的全部工作是在图表之外使用 react-day-picker 日历，包括管道 - 在选择日期后更新选择范围等. 我什至尝试过将此元素移动到图表 svg 中的方法，但无法使其正常工作。所以我的目标是实现一个轻量级的日期选择器，它可以绑定到内置数据选择器输入元素 inside 图表区域（同样没有 jQuery）。

如有任何帮助，我们将不胜感激。

Answer 1

您可以在点击默认输入元素后显示 DayPicker 组件，并使用 xAxis.setExtremes 方法应用所选日期。

class HighchartsChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      minInput: false,
      maxInput: false
    };
  }

  selectDay(time, isMin){
    const timestamp = time.getTime();
    const xAxis = this.internalChart.xAxis[0];

    xAxis.setExtremes(
      isMin ? timestamp : xAxis.min,
      isMin ? xAxis.max : timestamp
    );
    this.setState(isMin ? {minInput: false} : {maxInput: false});
  }

  render() {
    return (
      <div>
        <HighchartsReact
          constructorType={'stockChart'}
          highcharts={Highcharts}
          options={{
            chart: {
              events: {
                load: (function(component){
                  return function(){
                    const inputGroup = this.rangeSelector.inputGroup.element.children;
                    inputGroup[1].addEventListener('click', function(){
                      component.setState({minInput: true});
                    });

                    inputGroup[3].addEventListener('click', function(){
                      component.setState({maxInput: true});
                    });

                    component.internalChart = this;
                  } 
                })(this),
              }
            },
            ...options
          }}
        />
        {
          this.state.minInput && 
          <DayPicker onDayClick={(time) => {
            this.selectDay(time, true);
          }} />
        }
        {
          this.state.maxInput && 
          <DayPicker onDayClick={(time) => {
            this.selectDay(time);
          }} />
        }
      </div>
    );
  }
}

现场演示： https://codesandbox.io/s/highcharts-react-demo-mqqhu

API参考：https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

如何在 reactjs 中为 HighChart StockChart 实现日期选择器（没有 jQuery）

How to implement date selector to HighChart StockChart in reactjs (without jQuery)

highcharts

reactjs

react-day-picker