在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中将条形图的位置移动到水平条形图中

回答

相关问题