升级到Highcharts 5.0.8后，xAxis自动标签丢弃已停止工作

Question

标签在Highcharts 4中看起来很不错但在升级到Highcharts 5后我开始使用Ellipses。

xAxis.label属性看起来像这样。有没有什么办法可以强制标签水平渲染，如果没有足够的空间可以渲染掉落？我无法使用step:1

 labels: {
    rotation: 0

  }

Highcharts-4

Highcharts-5

旋转值I＆＃39; m用于不同的Label Angle选项如下：

• 自动 - 我正在使用autoRatate:[-10, -20, -30, -40, -50, -60, -70, -80, -90]
• - ：rotate:0 - 我对此选项有疑问
• ///：rotate:-45
• ||| ：rotate:90
• \\：rotate:45

Answer 1

看起来staggerLines可以解决此问题，但需要手动设置。

小提琴：

• http://jsfiddle.net/jlbriggs/a8g87gm8/14/

参考：

• http://api.highcharts.com/highcharts/xAxis.labels.staggerLines

Answer 2

所以我通过根据step的宽度动态计算xAxis大小来修复此问题。

这是我的解决方案：

 /**
 * Automatically calculate the step size based on the width of the container.
 * 1. Find the width of the xAxis
 * 2. Get the width of the label, which in our case is 80px.
 * 3. Find the no of labels that can be displayed on the xAxis.
 * 4. Find the max no of labels by iterating through all the xAxis.
 * 5. To find the final step size by dividing value from step 4 / step 3.
 *
 * @returns {number}
 * @private
 */

  _getLabelStep: function () {
    var xAxisWidth, labelWidth, labelsToDisplay, noOfTicks, step;
    xAxisWidth = this._getXAxisWidth();
    labelWidth = this.AXIS_LABEL_WIDTH;
    labelsToDisplay = Math.floor(xAxisWidth / labelWidth);
    noOfTicks = this._getMaxNoOfTicks();
    step = Math.floor(noOfTicks / labelsToDisplay);
    return isNaN(step) ? 0 : step;
  },

/**
 * Iterate through all the xAxis' and find the max no of ticks (labels)'.
 * @returns {number}
 * @private
 */
  _getMaxNoOfTicks : function () {
    var i ,maxNoOfTicks =0 ;
    if(this.chart && this.chart.xAxis){
        for(i=0 ; i<this.chart.xAxis.length ; i ++){
            if(this.chart.xAxis[i].dataMax && this.chart.xAxis[i].dataMax > maxNoOfTicks ){
                maxNoOfTicks = this.chart.xAxis[i].dataMax;
            }
        }
    }
    return maxNoOfTicks;

  },

/**
 * returns the width of the xAxis.
 * @private
 */
  _getXAxisWidth : function () {
    if(this.chart && this.chart.xAxis && this.chart.xAxis.length>0){
        return this.chart.xAxis[0].len;
    }
  }

• 调用函数_getLabelStep并设置标签step大小。

  labels:{step : this._getLabelStep()} style:{width : 80px}

• 为了能够根据step容器计算xAxis大小，我们必须要定义标签宽度。我个人80px。