升級至Highcharts後xAxis自動標籤丟失已停止工作5.0.8

Question

Highcharts 4中的標籤看起來不錯，但在升級至Highcharts 5後，我開始使用橢圓。

xAxis.label屬性看起來像這樣。如果沒有足夠的空間讓它們渲染，我有什麼辦法可以強制標籤水平渲染並放下？我不能用我使用不同的標籤step:1

labels: { 
    rotation: 0 

    } 

Highcharts-4

Highcharts-5

旋轉值角選項如下：

• 汽車 - 我正在使用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尺寸b固定的問題在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}

• 爲了能夠計算基於xAxis容器上的step大小，我們必須要有定義的標籤寬度。 i.w 80px在我的情況。