Highcharts / Highstock“Custom ticks”将xAxis搞砸了

时间:2018-03-10 04:18:37

标签: reactjs axis highstock

如何防止功能与其他轴标签拧紧?或者如何为rangeSelector All设置自定义xaxis标签?

我最近通过Highcharts中的导航器解决了我在这里收到的响应错误,可以在这里找到:

  

custom ticks based on selected range from rangeSelector in Highstock

我能够通过提供的答案解决并解决问题,但提供多个/自定义刻度仍然是我的问题。我以前尝试为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);
        }
      }
    },

但我对xAxis的整个配置都在这里

  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
  },

所以你明白,这是初始加载时的图像;默认情况下,在rangeSelector中选择(选中:6),一开始看似正常,不运行脚本函数

enter image description here

从默认加载

手动选择“全部”按钮后会发生什么

enter image description here

要放大xAxis标签受影响的方式,日期格式化为此

enter image description here

0 个答案:

没有答案