高图x轴标签的合理方法

Question

默认情况下，Highcharts将x轴标签错开多少行，以便全部显示，例如。

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

所有标签都塞在同一条线上，这样就无法真正读取它们。是否有某种方法可以说服Highcharts在一条线上显示尽可能多的标签，而不会相互重叠。

我意识到有一个step option可用于仅显示每个第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轴，并且让图表为您找出tickinterval，问题应该自行解决。