我想制作一个包含两组堆叠条的条形图，它们组合在一起以比较两组堆叠条。这应该以下列方式显示：
我经历过这个link
但它并没有帮助我绘制像您在上图中看到的那样。我什至尝试发送两个数据集，例如[[s1, s2, s3], [s4, s5, s6]]，但这并没有帮助我绘制图表。
有人知道怎么做吗？
任何帮助将不胜感激。 提前致谢。
【问题讨论】：
标签： jqplot axis bar-chart stacked stackedbarseries
设置选项stackSeries: true 将为条形图创建所需的显示。
【讨论】：
官方来源：
src/jqplot.core.js 第 2499、2563 和 2649 行。jqPlot documentation 不是最新的，所以我查看了source code。不幸的是，没有办法直接拥有两组带有堆积条形图的条形图。 jqPlot.stackSeries 属性只是一个布尔值。它的唯一功能是告诉 jqPlot 将每个系列堆叠在一起，以获得与不同系列中的值一样多的条形图。每个系列每条都绘制一个值，第一个系列位于底部。换句话说，所有[0] 值都绘制在第一个条形中，[1] 值绘制在第二个条形中，等等。条形中显示的数量是当前序列和所有先前序列的 [n] 值的总和。无法指定有两个或多个系列分组。 jqPlot 中不存在执行所需操作的能力。
但你可以完成你想要的：
jqPlot 本身不支持你想要的东西并不意味着你做不到，只是你需要发挥创造力。
您想要的图表可以看作是两个独立的图表，它们相互重叠，各个图表上的条之间的间距允许足够的空间 (seriesDefaults.rendererOptions.barMargin) 用于重叠另一个图表中的条在他们旁边。
您可以使用 jqPlot 创建：
该图表具有您希望设置为可见的比例、背景和网格线。请注意，该图表中有一个额外的条形图。这需要为另一个图表提供的最后一个条形图提供足够的背景和网格线。
您还可以使用 jqPlot 创建第二个图形：
此图在 jqPlot 中设置为不可见的比例和网格线。
seriesDefaults.axes.xaxis.tickOptions.show = false;
seriesDefaults.axes.yaxis.tickOptions.show = false;
etc.
背景设置为transparent。请注意，在定位 <div> 相对于第一个图时，您需要将该图的位置稍微向右偏移。
叠加后，您会得到：
然后，您使用与网页背景颜色相同的空白<div> 并将其覆盖以覆盖第一个图表上的额外条，但留下足够的第一个图表的背景和网格线来扩展略超过第二张图的最后一个柱。
你最终会得到：
您可以使用 jqPlot 1.0.8r1250 查看working solution at at JSFiddle。
比较原始请求与使用此方法生成的最终版本的图表，您可以看到它们非常接近： 两者之间最明显的区别是 jqPlot 版本中 Y 轴之间的空间更大。不幸的是，似乎没有减少堆叠条形图数量的选项。
请注意，此代码生成的图形右侧缺少边框是故意的，因为它在原始请求中不存在。就个人而言，我更喜欢在图表的右侧有一个边框。如果你稍微改变一下 CSS，那很容易获得： 我首选的图表版本包括左侧的边框并平衡空白：
你可以看到一个有效的JSFiddle of this version。
总的来说，这并不难。当然，如果 jqPlot 支持多组条形图会更容易。希望它会在某个时候。然而，最后一个版本是 2013-03-27，在那之后似乎没有任何开发工作。在此之前，每隔几个月就会发布一次。但是，jqPlot 是在 GPL 和 MIT 许可下发布的，因此任何人都可以继续工作。
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [13.6, 8.8, 3, 7.8, 0];
plot4 = $.jqplot('chart4', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#1B95D9", "#A5BC4E", "#E48701"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not actually obey these except barWidth.
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 1,
background: 'white', // CSS color spec for background color of grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [3.6, 3.8, 5.2, 10.4, 0];
plot4 = $.jqplot('chart5', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#754DE9", "#666666", "#000000"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not obey these options except barWidth.
show: true,
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axesDefaults: {
//show: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
show: false,
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
tickOptions: {
show: false
},
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: false, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 10,
background: 'transparent', // CSS color for background color of grid.
gridLineColor: 'transparent', // *Color of the grid lines.
borderColor: 'transparent', // CSS color for border around grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});#cover1 {
padding:0;
margin: 0;
background-color: white;
left: 451px;
width: 88px;
/* Uncomment the next three lines to have a border on the right of the graph and
balanced whitespace:*/
/*
border-left: 2px solid #CCCCCC;
left:476px;
width: 62px;
*/
}
#chart4 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart5 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart4 .jqplot-yaxis-tick {
font: 9px arial
}<link class="include" rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Main jqPlot -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<!-- Additional jqPlot plugins -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div style="position:absolute; left:10px; top:10px;">
<div id="chart4" style="width:548px; height:185px;"></div>
<div id="chart5" style="width:536px; height:185px; top:-185px; left:53px;"></div>
<div id="cover1" style="position: relative; height: 152px; top:-361px;"></div>
</div>以上代码基于example page listed in the question处的代码。
【讨论】：
实用的解决方案...
$(document).ready(function(){
var s1 = [2, 0, 0, 10,11,0, 6, 2, 0,10,11];
var s2 = [7, 0, 0, 4,11,0, 6, 2, 0,10,11];
var s3 = [4, 0, 0, 7,11,0, 6, 2, 0,10,11];
var s4 = [0, 20, 0, 0,0,0, 0, 0, 0,0,0];
plot3 = $.jqplot('chart3', [s1, s2, s3,s4], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barMargin: 30,
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
【讨论】：