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

Kal*_*exx 5 javascript jquery charts jqplot

我似乎无法将我的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
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

这样可以成功显示两个系列的并排条形图.但是,当我尝试通过取消注释来叠加它们时,stackSeries: true,所有条形图都从图形中取出(并且所有点标签都显示在Y轴标签上).

我究竟做错了什么?

小智 8

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

 rendererOptions: {
                barDirection: 'vertical',
                highlightMouseDown: true    
            }
Run Code Online (Sandbox Code Playgroud)

如果有更多选项,请务必在最后一个括号后包含逗号.堆栈还需要指定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
    ],
Run Code Online (Sandbox Code Playgroud)

在ticks:选项中使用月份(或任何你想要的文本),如下所示.

xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: months
            }
Run Code Online (Sandbox Code Playgroud)