0

我一直在 react 应用程序中使用 highcharts，而且对两者都比较新。我的目标中最后一个缺失的部分是让日历弹出窗口与股票图表中的日期选择范围挂钩。没有 jQuery。有几个例子接近我想要的。

发布使用 jQuery 的链接：HighChart Support - jQuery 示例

在图表外发布使用react-day- picker 的链接：在 HighChart 支持论坛上找到的帖子

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

任何帮助将非常感激。

4

1 回答 1

3

您可以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

于 2020-01-13T12:02:55.563 回答