2014-01-08 13 views
0

我想建立一个条形图,其中第一个系列代表收入,下三个代表不同种类的开支。所以第一系列是一个单一的酒吧,其余三个系列是堆叠酒吧。这是我的代码相同。是否有可能在同一个jqPlot图表中有条形条和堆积条?

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' 
    } 
}); 

我已经addded disableStack: true用于第一系列从栈中排除,但图表仍认为它为堆栈的一部分。这是我的代码的输出。

Output of my code

是有办法解决这一问题?谢谢。

回答

1

是的。这是您作为参数传递的序列的顺序不正确。 堆积系列 单杆系列 而不是反之亦然之后之前...

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

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

,然后你需要设置对“真”的disableStack属性的最后一个系列...

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

......你需要调整页边距,widts和列 的填充根据您的喜好...