在Flot中將條形圖的位置移動到水平條形圖中

我有2個在Flot中生成的圖表。 Sample charts 在Flot中將條形圖的位置移動到水平條形圖中

我想移動圖表中的酒吧，距離x軸1巴。我希望它有類似於10條圖形的間隙。例如，是否有一種更簡單的方式來指定我希望條距Y軸10個像素？

這是產生這些圖表的代碼：你需要更改autoscaleMargin圖之間

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" language="javascript" src="./flot/jquery-1.8.2.js"></script> 
    <script type="text/javascript" language="javascript" src="./flot/jquery.flot.js"></script> 
    <script type="text/javascript" language="javascript" src="./flot/jquery.flot.categories.js"></script> 
    <style type="text/css"> 
     .graph-container.store-container { 
      height: 180px !important; 
     } 
     .graph-container.operator-container { 
      height: 450px !important; 
     } 

     #top-stores-plot-numbers { 
      height: 70px !important; 
     } 
     #top-operators-plot-numbers { 
      height: 340px !important; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      var plotOptions = { 
       legend: { 
        show: false 
       }, 
       series: { 
        bars: { 
         show: true, 
         barWidth: 0.7, 
         align: "center", 
         horizontal: true 
        } 
       }, 
       yaxis: { 
        mode: "categories", 
        tickLength: 2, 
        axisMargin: 10, 
        autoscaleMargin: 0.05 
       }, 
       xaxis: { 
        autoscaleMargin:0.1, 
        min: 0, 
        ticks: 2 
       } 
      }; 

      var sn_data = [ 
        [ 6087, "ACME Store"], 
      ]; 
      var sn_ticks = [ 
        [ 0, "ACME Store"], 
      ]; 
      var sn_options = plotOptions; 
      sn_options["yaxis"]["ticks"] = sn_ticks; 
      sn_options["yaxis"]["max"] = 1; 
      $.plot("#top-stores-plot-numbers", [ sn_data ], sn_options); 

      var on_data = [ 
        [ 50, "CRISTINA"], 
        [ 68, "CASHIER2"], 
        [ 96, "MIESZKO"], 
        [ 115, "CASHIER1"], 
        [ 209, "TRAINING 1"], 
        [ 379, "JADE"], 
        [ 640, "HOST1"], 
        [ 711, "CAROLINA"], 
        [ 795, "SUPERVISER"], 
        [ 1376, "TRAINING"], 
      ]; 
      var on_ticks = [ 
        [ 0, "CRISTINA"], 
        [ 1, "CASHIER2"], 
        [ 2, "MIESZKO"], 
        [ 3, "CASHIER1"], 
        [ 4, "TRAINING 1"], 
        [ 5, "JADE"], 
        [ 6, "HOST1"], 
        [ 7, "CAROLINA"], 
        [ 8, "SUPERVISER"], 
        [ 9, "TRAINING"], 
      ]; 
      var on_options = plotOptions; 
      on_options["yaxis"]["ticks"] = on_ticks; 
      on_options["yaxis"]["max"] = 10; 
      $.plot("#top-operators-plot-numbers", [on_data], on_options); 
     }); 
    </script> 
</head> 
<body> 
    <div class="graph-container store-container"> 
     <h2>Top 10 by Number</h2> 
     <div id="top-stores-plot-numbers" class="graph-placeholder"></div> 
    </div> 
    <div class="graph-container operator-container"> 
     <h2>Top 10 by Number</h2> 
     <div id="top-operators-plot-numbers" class="graph-placeholder"></div> 
    </div> 
</body> 
</html>

來源

2013-03-27 CadentOrange

，而不是max爲y軸。

當您有1個酒吧時，將其設置爲0.5。當您有10個酒吧時，請將其設置爲0.05。拿出任何提及的yaxis.max，應該這樣做。

我改變了你y軸的對象，看起來像這樣在plotOptions：

  yaxis: { 
       mode: "categories", 
       tickLength: 2, 
       autoscaleMargin: 0.5 
      }

這就是你所需要的1個條形圖。

在調用$.plot的第二圖形，改變autoscaleMargin像這樣：

  on_options["yaxis"]["autoscaleMargin"] = 0.05;

就是這樣，看到它在行動（減去類插件）：http://jsfiddle.net/ryleyb/tVmTt/

來源

2013-03-27 15:31:03 Ryley

非常感謝。這是否意味着'autoscaleMargin'應該設置爲C/n，其中C是一個常數，n是項目的數量？在這種情況下，C會是0.5，所以當有一個項目0.5/1 = 0.5，並且當有10個項目時0.5/10 = 0.05？這是否適用於任意數量的物品？ – CadentOrange 2013-03-27 17:18:51

我有同樣的想法，但我不是100％肯定的！ – Ryley 2013-03-27 18:09:35

這是我對其他方面優秀flot的批評。配置非常複雜，文檔不完全清楚。 – CadentOrange 2013-03-27 18:34:27

在Flot中將條形圖的位置移動到水平條形圖中

回答

相關問題