2013-10-04 110 views
3

我在設計中爲圖分配的空間相當小,如果圖中有超過5個類別,則標籤彼此重疊。有沒有辦法來防止這種情況?以下是我遇到的一個例子:http://jsfiddle.net/bCYET/1/有沒有辦法在flot.js條形圖中防止xaxis標籤重疊?

var data = [ 
    ["Engineering",14], 
    ["Communications",11], 
    ["Business",9], 
    ["Biology",5], 
    ["Natural Sciences",2], 
    ["Studio Art",2] 
]; 

var options = { 
    series: { 
     bars: { 
      show: true, 
      barWidth: .6, 
      align: "center" 
     }  
    }, 
     xaxis: { 
      mode: "categories", 
      tickLength: 0 
     } 
} 

$.plot('#barchart', [data], options); 

更新:我想通了,我可以把傳說中的容器圖表這對我的工作之外。示例:http://jsfiddle.net/bCYET/2/

回答

3

這是當前的open issue with flot.js。該頁面上的解決方案中,flot-tickrotor可能是最容易使用的。

+0

謝謝,我想我也嘗試過,但如果標籤很長,那麼實際的圖形會被壓扁以爲標籤看起來不太好看。我發現我可以爲圖例指定一個div容器(所以它沒有掩蓋圖表),這對我很有用。我將其添加到我的[小提琴](http://jsfiddle.net/bCYET/2/)供其他人看。 –

相關問題