定制蜱基于从rangeSelector在Highstock选定范围(custom ticks bas

我试图让我的Highcharts / Highstock图，此时rangeSelector设置为所有显示自定义打勾，我把它设置这种方式，但我扔错误，当我尝试使用图形的交互式部分

接收以下回答从Highstock变化周期的时间间隔上范围选择变化

  componentDidMount() {
    // Timezone Offset for PST standard is UTC timezone
    Highcharts.setOptions({
        global: {
          timezoneOffset: 8 * 60
        },
        lang: {
          thousandsSep: ','
        }
    });
    Highcharts.stockChart('chart', {
      chart: {
          backgroundColor:'rgba(255, 255, 255, 0.0)',
          height: 400,
          zoomType: 'xy'
      },

      title: {
          text: 'Bitcoin Chart',
          style: {
            color: 'white'
          }
      },

      navigator: {
        trigger: "navigator",
        triggerOp: "navigator-drag",
        rangeSelectorButton: undefined,
        handles: {
          backgroundColor: 'white',
          borderColor: 'black'
        }
      },

      scrollbar: {
        enabled: false
      },

      rangeSelector: {
        buttons: [{
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'day',
            count: 7,
            text: '7d'
        }, {
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }, {
            type: 'all',
            text: 'All'
        }],
          selected: 6,
          // styles for the buttons
          buttonTheme: {
            fill: 'black',
            // stroke: 'none',
            'stroke-width': 0,
            r: 8,
            style: {
                color: 'white',
                fontWeight: 'bold'
            },
            states: {
                hover: {
                },
                select: {
                    fill: 'white',
                    style: {
                        color: 'black'
                    }
                }
            }
          },
          // Date Selector box
          inputBoxBorderColor: 'black',
          inputBoxWidth: 120,
          inputBoxHeight: 18,
          inputStyle: {
              color: 'black',
              fontWeight: 'bold'
          },
          labelStyle: {
              color: 'silver',
              fontWeight: 'bold'
          },
      },

      series: [{
          name: 'Bitcoin Price',
          color: 'black',
          data: this.props.data.all_price_values,
          type: 'area',
          threshold: null,
          tooltip: {
            valuePrefix: '$',
            valueSuffix: ' USD',
            valueDecimals: 2
          }
      }],

      plotOptions: {
          series: {
              fillColor: {
                  linearGradient: [0, 0, 0, 0],
                  stops: [
                      [0, '#FF9900'],
                      [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                  ]
              }
          }
      },

      xAxis: {
        events: {
          setExtremes: function(e) {
            if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
              var range = e.max - e.min;

              // ticks spaced by one day or one hour
              var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

              this.update({
                  tickPositioner: function() {
                      var positions = [],
                      info = this.tickPositions.info;
                      for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                          positions.push(x);
                      };
                      positions.info = info;
                      return positions;
                  }
              }, false);
            }
          }
        },
        title: {
          enabled: true,
          text: 'Date (Timezone: PST)',
          style: {
            color: 'white'
          }
        },
        labels: {
          style: {
            color: 'white'
          }
        },
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%b %e, %Y'
        },
        tickInterval: 1
      },

      yAxis: {
        floor: 0,
        labels: {
          formatter: function () {
                    return '$' + this.axis.defaultLabelFormatter.call(this);
            },
          format: '{value:,.0f}',
          align: 'left',
          style: {
            color: 'white'
          },
        },
      },
      // Mobile Design
      responsive: {
          rules: [{
              condition: {
                  maxWidth: 600
              },
              chartOptions: {
                  chart: {
                      height: 400
                  },
                  subtitle: {
                      text: null
                  },
                  navigator: {
                      enabled: false
                  }
              }
          }]
      }
    });
  }

我说的是蓝色显示的部分，当我移动它，它抛出一个错误

我试图让图表对所有rangeSelector每天2个图，显示在当天的第一个点，并在一天的最后一个点。我究竟做错了什么？

编辑1：更新到全配置，X轴现正由原始的答案打乱，蜱自定义范围选择仍然在工作。添加的图像显示是怎么回事

该setExtremes事件每次更改时间范围内将显示在图表上提出的。它可以有几个来源：

点击一个按钮的范围内选择
在导航器中拖动手柄
等等..

该事件的实际性能取决于它的起源。如果输出与事件console.log(e)你会发现它并不适合这两个根源是相同的：

按一下按钮的范围内选择

{
    trigger: "rangeSelectorButton",
    rangeSelectorButton: {
        text: "2Hour", 
        type: "hour",
        count: 2, 
    }, 
    ...
}

在导航拖动手柄

{
    trigger: "navigator", 
    triggerOp: "navigator-drag", 
    rangeSelectorButton: undefined
}

如果您在导航拖动手柄，没有rangeSelectorButton附加到事件，因为它没有任何意义：在这种情况下，没有按钮被按下。

要解决你的错误，你可以添加在检查trigger属性：

 xAxis: {
    events: {
      setExtremes: function(e) {
        if (e.trigger === "rangeSelectorButton" && e.rangeSelectorButton.text === "All") {
           ...
        }
      }
   }

如何解决实际问题

现在，真正的问题。你想改变基础上显示的内容蜱：要么开始每一天的结束，或者小时，如果没有一个完整的一天。你可以做到这一点与e.min和e.max ，代表选定的时间范围。

像这样：

setExtremes: function(e) {
    var range = e.max - e.min;

    // ticks spaced by one day or one hour
    var ticksSpacing = range >= 86400 * 1000 ? 86400 : 3600;

    this.update({
        tickPositioner: function() {
            var positions = [],
            info = this.tickPositions.info;
            for (var x = this.dataMin; x <= this.dataMax; x += ticksSpacing * 1000) { // Seconds * 1000 for ticks
                positions.push(x);
            };
            positions.info = info;
            return positions;
        }
    }, false);
}