当x轴为文本时，我该如何显示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轴标签上）。

我做错了什么？

- KallDrexx

Answer 1

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

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

请确保在最后一个括号后加上逗号，如果有更多选项，请参照此格式。堆栈要求还必须指定x轴。

您的数据结构应该像这样。每个项目中的前导数字表示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
            }

- Jack

---

通过在x轴上使用数字值（带有特殊刻度值）来重新格式化数值，并调整条形图的方向，问题得到了解决！非常感谢！ - KallDrexx

你能指定你使用了什么特殊的刻度吗？因为我遇到了同样的问题，指定棒的方向并没有帮助... - Usman Masood

Answer 2

我添加这个解决方案是因为我发现之前发布的那个在我的环境中不起作用（尽管它确实让我找到了正确的方向，所以感谢@Jack）-以下内容适用于我在运行jqPlot 1.0.8r1250、JQuery 1.9.1和JQuery UI 1.1O.3的ASP.NET MVC3站点上：

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

我还发现，在seriesDefaults > pointLabels节点下，stackedValue: true没有效果，相反，我必须取消注释根节点下的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>

希望这对将来的某个人有所帮助。

- Chopo87