Question

我似乎无法将我的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轴标签上）。

我做错了什么？

Answer 1

您需要在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
            }

Answer 2

我正在添加这个解决方案，因为我发现以前发布的一个在我的环境中不起作用（虽然它确实让我走上正轨，所以感谢@Jack） - 以下在ASP.NET MVC3网站上为我工作使用JQuery 1.9.1和JQuery UI 1.1O.3运行jqPlot 1.0.8r1250：

对我来说，添加渲染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>

希望将来有人帮助

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

2 个答案: