[英]jqplot Side by Side Stacked Bar Chart
是否可以使用 jqplot 实现并排堆叠条形图? 例如,X 轴将是一个给定的月份,并且每个月您都会有一些堆叠的条形图。
像这样的东西:
注意:我要求的是与普通堆叠图表不同的东西。 请查看图片以更好地了解我正在尝试做的事情。
您将不得不在同一个绘图基础上绘制两个图表,如果您不想要任何工具提示或其他东西,这将是可以的,因为它只适用于其中一个绘图试试这个 -
$(document).ready(function(){
/* graph config */
var maxVal = 13;
/* graph vals */
var Bar1 = [5, 0, 10, 0, 12, 0];
var Bar2 = [0, 17, 0, 20, 0, 12 ];
var BaseVals=[0,0,0,0,0,0];
/* graph ticks */
var baseTicks=['Americas','','Europe','','Asia','']
var EmptyTicks=['','','','','','']
/* plot the base graph */
plotbase = $.jqplot('chart3', [BaseVals], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false, angle: 90},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: baseTicks,
tickOptions: {markSize: 0}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
}
});
plot2 = $.jqplot('chart3', [Bar1], {
seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: EmptyTicks
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
},
grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
plot1 = $.jqplot('chart3', [Bar2], {
stackSeries: true,
captureRightClick: true,
seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true },
pointLabels: {show: false}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
ticks: EmptyTicks,
tickOptions: {
angle: -90,
}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal
}
}, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
});
但请注意,您只能在其中一个绘图上应用工具提示/荧光笔
是的,可以这样做。
参考jqplot
源代码:
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 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);
}
);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.