在堆积条形图中,我们可以显示每个堆栈中每个系列的总数,如下所示 但是我想要显示每个系列的值,而不是这样的总数(请忽略这两个样本具有不同数量的系列的事实) 另外我想在顶部显示堆栈的总数。 我的意思是,如果你看第一张图,在第一个柱中,值是5,15(5 + 10),24(15 + 9)。 我想要的结果应该像第二个图表,第一个栏的值是10,9,最后是前19个的总和。 这个库可以吗?
答案 0 :(得分:8)
这里有点黑客攻击。既然你想为每个系列再添一个标签,我就引入了一个“空”系列。不过,它可以很好地复制你想要的东西。小提琴here。
$(document).ready(function(){
var s1 = [5, 6];
var s2 = [7, 5];
var s3 = [14, 9];
var s4 = [0, 0]; //empty series just for total labels
var pLabels1 = []; // arrays for each inner label
var pLabels2 = [];
var pLabels3 = [];
var pLabelsTotal = []; // array of totals above each column
for (var i = 0; i < s1.length; i++){
pLabels1.push('<div style="border:1px solid gray">'+s1[i]+'</div>');
pLabels2.push('<div style="border:1px solid gray">'+s2[i]+'</div>');
pLabels3.push('<div style="border:1px solid gray">'+s3[i]+'</div>');
pLabelsTotal.push(s1[i]+s2[i]+s3[i]);
}
plot3 = $.jqplot('chart2', [s1, s2, s3, s4], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
},
series:[
{
pointLabels:{
show:true,
labels:pLabels1,
ypadding: -25,
escapeHTML:false
}
},
{
pointLabels:{
show:true,
labels:pLabels2,
ypadding: -25,
escapeHTML:false
}
},
{
pointLabels:{
show:true,
labels:pLabels3,
ypadding: -25,
escapeHTML:false
}
},
{
pointLabels:{
show:true,
labels:pLabelsTotal,
ypadding: 7,
escapeHTML:false
}
}
],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0,
min: 0
}
},
legend: {
show: false,
}
});
});
产地: