是否可以使用jqplot实现并排堆叠条形图？例如,X轴将是给定月份,并且对于每个月,您将具有一些堆叠条形.
像这样的东西：
注意：我要求的是一些不同的东西,只是一个正常的堆积图表.请查看图片以更好地了解我正在尝试做的事情.
解决方法@H_404_8@
是的,有可能这样做.
参考jqplot
源代码：
$(document).ready(function(){
var s1 = [2,6,7,10];
var s2 = [7,5,3,4];
var s3 = [14,9,8];
plot3 = $.jqplot('chart3',[s1,s2,s3],{
// 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
},pointLabels: {show: true}
},axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},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: true,location: 'e',placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here,simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',function (ev,seriesIndex,pointIndex,data) {
$('#info3').html('series: '+seriesIndex+',point: '+pointIndex+',data: '+data);
}
);
});
参考jqplot
源代码：
$(document).ready(function(){
var s1 = [2,6,7,10];
var s2 = [7,5,3,4];
var s3 = [14,9,8];
plot3 = $.jqplot('chart3',[s1,s2,s3],{
// 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
},pointLabels: {show: true}
},axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},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: true,location: 'e',placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here,simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',function (ev,seriesIndex,pointIndex,data) {
$('#info3').html('series: '+seriesIndex+',point: '+pointIndex+',data: '+data);
}
);
});
