javascript - highcharts x 轴标签的明智方法

Question

默认情况下，Highcharts 将 x 轴标签错开在尽可能多的行上，以便将它们全部显示出来，例如

在这种特殊情况下，看起来很疯狂。有一个staggerLines 选项，可用于指定将标签分布在多少行上。如果我将其设置为 1，我会得到同样不受欢迎的东西：

所有的标签都塞在同一行上，因此实际上没有一个标签可以被读取。有什么方法可以说服 Highcharts 在一行上显示尽可能多的标签，而不会相互重叠。

我意识到有一个step 选项可用于仅显示每第 n 个标签，但这对我来说没有多大用处，因为图表中的数据点总数 (N) 根据用户选择而有很大差异，因此，当 N 如此多变时，设置 n 是毫无意义的。

Answer 1

您还可以使用tickInterval来定义刻度之间的距离。

Answer 2

我使用tickInterval属性和一些非常基本的代数解决了这个问题。图表上显示的标签数量由下式给出

seriesLength / tickInterval = labelCount

因此，如果我们只能适合 11 个标签，则设置labelCount为 11 并重新排列上面的公式以求解tickInterval：

var tickInterval = seriesLength / 11

该tickInterval属性必须是一个整数，因此在将其分配给轴的tickInterval属性之前对其进行转换：

$j('#container').highcharts({

    xAxis: {
        tickInterval: Math.ceil(tickInterval)
    }

    // other Highcharts properties omitted
}

Answer 3

1）您可以使用旋转：

xAxis: {
    labels: {
    rotation: -90,
    align: 'right'
  }
}

2）如果旋转没有帮助 - 您可以计算步长（如果 xaxis 分类）。此代码将计算加载步骤、添加系列和缩放步骤。

chart: {
      zoomType: 'x',
      events: {
        addSeries: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        },
        load: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        }
      }
    },
    xAxis: {
          events: {
            setExtremes: function (event) {
              if (Math.abs(this.options.labels.rotation) == 90) {
                var labelWidth = parseInt(this.options.labels.style.lineHeight) + 2;
                var plotAreaWidth = parseInt(this.chart.plotBox.width);
                var labelsCount = Math.floor(plotAreaWidth / labelWidth);
                if (event.max !== null && event.max !== undefined) {
                  var pointsCount = Math.round(event.max - event.min);
                } else {
                  var pointsCount = Math.round(this.dataMax - this.dataMin);
                }
                var step = Math.ceil(pointsCount / (labelsCount * (this.tickInterval == null ? 1 : this.tickInterval)));
                this.update({'labels': {'step': step}}, true);
              }
            }
          }
        }

Answer 4

您是否使用分类的 x 轴？

如果您改为使用日期时间 x 轴，则问题应该会自行解决，并让图表为您计算滴答间隔。