如何在xaxis为文本时显示jqplot堆积条形图？

我似乎无法让我的jqplot条形图堆叠。我有以下代码：如何在xaxis为文本时显示jqplot堆积条形图？

// Pass/Fail rates per request 
$.jqplot('passFailPerRequestStats', [passRate, failRate], { 
    title: 'Automation Pass Count Per Test Plan', 
    //stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 }, 
     pointLabels: { show: true, stackedValue: true } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
});

这是成功显示两个系列的并排条形图。但是，当我试图通过取消stackSeries: true,的注释来堆叠它们时，所有条形图都从图上取下（并且所有点标签都显示在Y轴标签上）。

我在做什么错？

来源

2011-10-20 KallDrexx

您需要在rendererOptions对象中包含barDirection。

rendererOptions: { 
       barDirection: 'vertical', 
       highlightMouseDown: true  
      }

请确保在最后一个括号后包含逗号，如果有更多选项遵循这一点。该堆栈还需要指定xaxis。

您的数据结构应该如下所示。每个项目中的前导数字表示X轴。

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]]; 
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 
    plot4 = $.jqplot('chartdiv', [ 
    s1, 
    s2, 
    s3 
    ],

在ticks选项中使用月份（或任何你想要的文字），像这样。

xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: months 
      }

来源

2011-10-25 14:56:57 Jack

无论是酒吧方向，并重新格式化通过使用x轴的数值（使用特殊的刻度值）来修正它的值！非常感谢！ – KallDrexx

你可以指定你使用了什么特殊的刻度，因为我面临同样的问题，并指定酒吧方向没有帮助... –

我加入这个解决方案，因为我找到了以前发布的一个不是在我的环境中工作（虽然它没有把我在正确的轨道上，所以感谢@Jack） - 以下为我工作在ASP运行jqPlot 1.0.8r1250与jQuery 1.9.1和jQuery UI 1.1O.3的.NET MVC3网站：对我来说，添加渲染rendererOptions{...}竟然是不必要的。

我还发现stackedValue: true下的seriesDefaults > pointLabels节点没有任何效果，取而代之的是我不得不在根节点下取消注释stackSeries: true。

我的最终代码：

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]]; 
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

$.jqplot('chartdiv', [s1, s2, s3], { 
    title: 'Automation Pass Count Per Test Plan', 
    stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: months 
     } 
    } 
});

另外，还要确保你包括以下几个环节：

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>

希望这帮助的人在未来

来源

2013-07-18 14:07:57 Chopo87

如何在xaxis为文本时显示jqplot堆积条形图？

回答

相关问题