Question

我创建了一个水平方向条形图，其中带有jqPlot的堆叠条形图。现在我正在努力解决以下两个问题：

jqPlot在条形的末尾显示条形（点）标签。如何将标签放在条形图的中间？
jqPlot汇总堆积条形图中的值。因此，如果条形值是例如如图1,2和3所示，标签将相应地为1,3（= 1 + 2）和6（= 1 + 2 + 3）。如何让标签代表条形图的实际值而不是将值加起来？

我搜索了所有jqPlot文档，发现没有任何方法可以解决这些问题： - （

提前感谢您的帮助！

以下是使用的代码：这是加载的脚本：

<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" />

这是一个需要HTML的例子：

<div id="jqplot-id" style="width: 300px; height: 30px;"></div>

这是用于绘制条形的函数：

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()),
                    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');
    }

以下是它的调用方式：

drawPlotBars('jqplot-id', [[1], [2], [3]]);

jqPlot，水平堆叠条：如何更改标签的位置和值以进行报告？

0 个答案: