2011-08-27 78 views
7

我在探索flot,jQuery图形库。如何构建一个没有垂直轴线的jquery/flot条形图?

我希望能够创建条形图。似乎它并没有真正为此设置。如果我稍微扭曲我的数据,我可以把它做到主要是做我的设想。使用此代码:

var dataSet = [ 
    [ 15132, "Inez" ], 
    [ 21441, "Rocky" ], 
    [ 29141, "Jim" ], 
    [ 18211, "Sophia" ], 
    [ 17556, "Perry" ], 
    [ 32251, "Jorge" ], 
    [ 43560, "Madison" ], 
    [ 20180, "Gil" ], 
    [ 12180, "Fran" ], 
    [ 31018, "Sheila" ], 
    [ 45143, "Nial" ], 
    ]; 


    function plotChart() { 
    var d1, xaxisLabels = [], i=0; 

    d1 = dataSet.map(function(elt){return {label: elt[1], data: [[i++, elt[0]]]};}); 
    i = 0; 
    // example for xaxis option: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]}, 
    xaxisLabels = dataSet.map(function(elt) { return [i++, elt[1]]; }); 
    $.plot($("#chart1"), 
      d1, 
      { 
      legend: { 
       show: true, 
       container: $('#legend1'), 
      }, 
      series: { 
        bars: { 
        show  : true, 
        align  : 'center', 
        //dataLabels : true, 
        barWidth : 0.4 
        } 
      }, 
      xaxis: { ticks: xaxisLabels }, 
      yaxis: { 
        ticks: 10 
      }, 
      grid: { 
        show: true, 
        backgroundColor: { colors: ["#fff", "#eee"] } 
      } 
      }); 
} 

$(document).ready(plotChart); 

这就是我得到:

enter image description here

这是相当不错的。但我想删除垂直轴线。这些可能在折线图中有意义,但不在条形图中。

任何人都知道我该怎么做?

回答

8

所有你需要的是

xaxis: { tickLength: 0 } 
+0

哇!真?我以为我曾尝试过。谢谢 - 更简单。多么尴尬! – Cheeso

+0

这对我不起作用。我使用Flot 0.7。 – neoneye