当xaxis是文本时，如何显示jqplot堆栈条形图?

I can't seem to get my jqplot bar graph to stack. I have the following code:

我似乎无法将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
        }
    }
});

This is successfully displaying a side by side bar graph for both series. However, when I try to stack them by uncommenting out the stackSeries: true, all bar graphs are taken off the graph (and all point labels are displayed on the Y axis labels).

这两个系列都成功地显示了并排的条形图。但是，当我试图通过取消stackSeries: true来堆叠它们时，所有的条形图都被从图形中删除(所有的点标签都显示在Y轴标签上)。

What am I doing wrong?

我做错了什么?

2 个解决方案

#1

You need to include barDirection in your rendererOptions object.

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

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

Be sure to include the comma after the last bracket, if more options follow this. The stack requires the xaxis to be specified also.

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

Your data structure should look like this. with the leading number in each item indicating the X axis.

数据结构应该是这样的。每个项目中的序号表示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
    ],

Use the months (or whatever text you want) in the ticks: option like so.

在“嘀嗒:像这样的选项”中使用月份(或者你想要的任何文本)。

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

#2

I am adding this solution as I found the previously posted one to not work in my environment (although it did put me on the right track, so thanks @Jack) - The following worked for me on an ASP.NET MVC3 site running jqPlot 1.0.8r1250 with JQuery 1.9.1 and JQuery UI 1.1O.3:

我正在添加这个解决方案，因为我发现前面发布的解决方案在我的环境中不能工作(尽管它确实使我走上了正确的道路，所以谢谢@Jack)——以下是我在ASP上的工作。NET MVC3网站运行jqPlot 1.0.8r1250，使用JQuery 1.9.1和JQuery UI 1.1 .3:

For me adding render rendererOptions{...} turned out to be unnecessary.

对于我添加渲染渲染rendererOptions{…结果证明是不必要的。

I also found that stackedValue: true under the seriesDefaults > pointLabels node had no effect, instead I had to uncomment stackSeries: true under the root node.

我还发现，在seriesDefaults > pointlabel节点下，stackedValue: true没有效果，相反，我必须取消stackSeries: true在根节点下。

My final code:

我最后的代码:

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
        }
    }
});

Also make sure you include the following links:

还要确保包含以下链接:

<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>

Hope this of help to someone in the future

希望这对未来的人有帮助。

#1