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

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） - 以下内容在运行 jqPlot 1.0 的 ASP.NET MVC3 网站上为我工作.8r1250 与 JQuery 1.9.1 和 JQuery UI 1.1O.3：

对我来说，添加渲染 rendererOptions{...} 是不必要的。

我还发现 seriesDefaults > 下的 stackedValue: true 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>

希望这对将来的人有帮助