Question

我正在尝试建立一个条形图，其中第一个系列代表收入，接下来的三个代表不同类型的费用。因此，第一个系列是单个条形，其余三个系列是堆叠条形。这是我的代码。

var s0 = [15, 17, 19, 21];
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
var ticks = ['May', 'June', 'July', 'August'];
var plot3 = $.jqplot('chart1', [s0, s1, s2, s3], {
    stackSeries: true,
    animate: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true,
        },
        rendererOptions: {
            fillToZero: true,
            barMargin: 30,
            barWidth: 50,
            barPadding: 5,
            barDirection: 'vertical'
        },
    },
    series: [
        {
            disableStack: true,
            label: 'Revenue'
        },
        {label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3'}
    ],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '13pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
        }
    },
    legend: {
        show: true,
        location: 'e',
        placement: 'outside'
    }
});

我为第一个系列添加disableStack: true以将其从堆栈中排除，但图表仍将其视为堆栈的一部分。这是我的代码的输出。

Output of my code

有没有办法解决这个问题？感谢。

Answer 1

是。这是你作为参数传递的系列的顺序是不正确的。堆叠系列之前单杆系列之后而不是反过来......

所以你必须把第一个系列作为最后一个参数......

var plot3 = $.jqplot('chart', [s1, s2, s3, s0], {

然后你需要在＆＃39; true＆＃39;上设置disableStack属性。最后一个系列......

series: [
    {label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3',label: 'Revenue', disableStack: true}
],

...你需要调整列的边距，宽度和填充如你所愿......

是否可以在同一jqPlot图表中使用reqular bar和堆叠条？

1 个答案: