2014-01-13 122 views
1

我正在使用highcharts來顯示條形圖。我有一個固定的圖表垂直高度,我希望顯示所有的xAxis標籤。 webparts容器的水平部分響應窗口的大小。我發現在某些水平尺寸的圖例環繞看起來會導致我的一些xAxis標籤隱藏。我一直無法找到任何可以防止這種情況的設置或設置組合。有沒有人知道在不改變Web部件的垂直高度的情況下做到這一點的方法?Highcharts防止xAxis標籤隱藏

示例jsFiddle的問題。

以下示例代碼,

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="height: 180px; width: 330px; margin: 0 auto"></div> 
<div id="container2" style="height: 180px; width: 500px; margin: 0 auto"></div> 

的Javascript

$(function() { 
    var options = { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: null 
     }, 
     xAxis: { 
      categories: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5'] 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name:'Due > 7', 
      data: [29.9, 71.5, 106.4, 129.2, 144.0] 
     },{ 
      name:'Due < 7', 
      data: [34.9, 72.1, 99.4, 150.4, 169.1] 
     },{ 
      name:'Overdue < 7', 
      data: [29.9, 71.5, 106.4, 129.2, 144.0] 
     },{ 
      name:'Overdue > 7', 
      data: [34.9, 72.1, 99.4, 150.4, 169.1] 
     }] 
    }; 
    $('#container').highcharts(options); 
    $('#container2').highcharts(options); 
}); 

回答

0

您可以重新設計一個小圖,一些解決方案:

+0

maxHeight似乎是我的最佳選擇。感謝您的選擇。 – mojo

0

您可以使用步驟選項,他的值設置爲一個。 (文檔:http://api.highcharts.com/highcharts#xAxis.labels.step

在我的項目中,這解決了被highcharts隱藏的xAxis標籤,因爲API隱藏元素會因爲缺少空間而被其他元素覆蓋。所以,當我使用這個時,所有的xAxis值都會顯示出來,但是有一些會覆蓋下一個標籤。所以,我必須擴展我的圖形高度。

但工作,它現在是非常好的響應!