我有使用jqplot完成的条形图现在我希望在x轴的每个点上有3个条形。怎么做到呢。？请查看此图片http://peltiertech.com/Utility/pix/clusterstackchart.png
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="chat3" style="height:400px;width:300px; "></div>
<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript">
$(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: {
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);
}
);
});
</script>
</body>
</html>
答案 0 :(得分：1)
var s1 = [ 1, 2, 2, 3 ];
var s2 = [ 12, 32, 3, 12 ];
var s3 = [ 12, 32, 54, 64 ];
var ticks = [ 'Section1', 'section2', 'section3',
'section4' ];
plot2 = $.jqplot('chart3', [ s1, s2, s3 ], {
animate : !$.jqplot.use_excanvas,
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
},
rendererOptions : {
barPadding : 8, // number of pixels between
// adjacent bars in the same
// group (same category or bin).
barMargin : 25, // number of pixels between
// adjacent groups of bars.
barDirection : 'vertical', // vertical or
// horizontal.
barWidth : 20, // width of the bars. null to
// calculate automatically.
}
},
series : [ {
label : 'X axis 1'
}, {
label : 'X axis 2'
}, {
label : 'X axis 3'
}, ],
seriesColors : [ "#efa229", "#245779", "#4BB2C5" ],
axesDefaults : {
base : 10, // the logarithmic base.
tickDistribution : 'even', // 'even' or 'power'.
// 'even' will produce
// with even visiual
// (pixel)
// spacing on the axis. 'power' will produce ticks
// spaced by
// increasing powers of the log base.
},
axesDefaults : {
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
tickOptions : {
fontSize : '7pt'
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
},
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
}
},
tickOptions : {
fontSize : '7pt'
},
legend : {
show : true,
location : 'ne', // compass direction, nw, n, ne,
// e, se, s, sw, w.
xoffset : 12, // pixel offset of the legend box
// from the x (or x2) axis.
yoffset : 12, // pixel offset of the legend box
// from the y (or y2) axis.
placement : 'outside'
},
cursor : {
show : false,
showTooltip : true,
tooltipLocation : 'ne',
},
grid : {
background : 'white'
}
});
上面是我实现的代码，用于在每个x点显示3 bar ..希望你能找到这个有用的
以下是有用的js和css文件
jquery.jqplot.min.css"
jquery.jqplot.min.js
jqplot.highlighter.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js"></script>
jqplot.cursor.min.js
jqplot.dateAxisRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js