如何在reactjs中实现对HighChart StockChart的日期选择器（无jQuery）

Question

我一直在应聘应用程序中使用高位图表，并且两者都相对较新。我目标的最后一个遗漏是使日历弹出窗口与股票图表中的日期选择范围挂钩。没有jQuery。有几个例子很接近我想要的。

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

图表外部链接到react-day-picker的使用的帖子：Post found on the HighChart support forum

我要做的就是充分利用表中的react-day-picker日历outside，包括管道-在选择日期后更新选择范围等。我什至尝试了一种方法将此元素移至图表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