开发者

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:

  1. jqPlot displays bar (point) labels at the end of the bars. How can I get the labels positioned in the middle of the bars?

  2. 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]]);  
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜