jqPlot, horizontal stacked bars: how to change labels' position and values to be reported?
I've created a horizontally oriented bar chart with stacked bars with jqPlot. Now I'm struggling with the following two issues:
jqPlot displays bar (point) labels at the end of the bars. How can I get the labels positioned in the middle of the bars?
jqPlot sums up the values in the stacked bars. So, if the bar values are e.g. 1, 2 and 3, the labels will be correspondingly 1, 3 (=1+2) and 6 (=1+2+3). How can I get the labels to represent the bars' actual values instead of summing the values up?
I searched though all the jqPlot docs and found nothing that worked to resolve these issues :-(
Thank you in advance for your help!
Here comes the code used: here are the scripts loaded:
<script language="javascript" type="text/javascript" src="jquery.1.6.2.min.js"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
here is an example of HTML needed:
<div id="jqplot-id" style="width: 300px; height: 30px;"></div>
here is the function that is used to draw bars:
function drawPlotBars(id, series)
{
this.sum = function(series){
var series;
var s = 0;
for (var i = 0; i < series.length; i++)
{
s += parseInt(series[i]);
}
return s;
};
// padding correction
$.jqplot.preInitHooks.push(function(){
this._defaultGridPadding = {
top:1,
right:1,
bottom:1,
left:1
};
});
var plot = $.jqplot(id, series, {
stackSeries: true,
seriesDefaults:
{
renderer:$.jqplot.BarRenderer,
rendererOptions:
{
barDirection: 'horizontal',
barWidth: qsParseInt($('#'+id).height()),
开发者_如何学C shadowDepth: 0,
shadowOffset: 0
},
pointLabels: {
show: true,
formatString: '%u%'
}
},
series: [{
pointLabels:{
labelsFromSeries: true,
stackedValue: false
}
}],
axesDefault:
{
show: false,
pad: 0.5,
numberTicks: 0,
tickOptions:
{
show: false,
showLabel: false,
showMark: false,
showGridline: false,
markSize: 0,
mark: 'inside'
},
showTicks: false,
showTickMarks: false
},
axes:
{
xaxis:
{
min: 0,
max: this.sum(series),
show: false,
pad: 0.2,
tickOptions:
{
show: false,
showGridline: false
}
},
yaxis:
{
show: false,
padMin: 0,
padMax: 0,
min: .8,
max: 1.2,
pad: 0,
tickOptions:
{
show: false
}
}
},
grid:
{
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#ffffff', // CSS color spec for background color of grid.
borderColor: '#002F41', // CSS color spec for border around grid.
borderWidth: .2, // pixel width of border around grid.
shadow: false, // draw a shadow for grid.
shadowAngle: 0, // angle of the shadow. Clockwise from x axis.
shadowOffset: 0, // offset from the line of the shadow.
shadowWidth: 0, // width of the stroke for the shadow.
shadowDepth: 0, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
});
// add some contrast for labels to be seen clearer
var labels = $('#'+id).find('.jqplot-point-label');
labels.css('color', '#fff');
}
here is how it is called:
drawPlotBars('jqplot-id', [[1], [2], [3]]);
精彩评论