首页 文章

如何在jqPlot中的条形图上获得一条简单的平均线

提问于
浏览
2

我正在使用jqPlot中的条形图,我需要在图表上显示一条单独的平均线 . 我的问题是如何做到这一点?我需要使用折线图吗?我看了几个折线图示例,但它们在条形图中显示为趋势,从图表上的第一个条形开始而不是显示平均值 . 我需要的是使用显示的所有条形图的平均值绘制线条在图表上(屏幕截图如下)

enter image description here

我用于绘制数据的JSON字符串如下:

var commonOption= {    
            title: '' 
            ,stackSeries: true    
            ,captureRightClick: true    
            ,seriesDefaults:{      
                renderer:$.jqplot.BarRenderer      
                ,rendererOptions: {          
                    barMargin: 15          
                    ,highlightMouseDown: true   
                    ,fillToZero: true               
                },      
                pointLabels: {
                    show: true
                    ,formatString: '%.1f'
                    ,seriesLabelIndex:1
                    ,hideZeros:false
                }
            }   
            ,seriesColors: ['#A9CB5E']
            ,axes: {      
                xaxis: {          
                    tickOptions:{angle:-45}
                    ,tickRenderer: $.jqplot.CanvasAxisTickRenderer
                    ,renderer: $.jqplot.CategoryAxisRenderer
                    ,ticks: []
                },      
                yaxis: {   
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    ,padMin: 0
                    ,pad: 1.1
                    , label: 'Percentage (%)'
                    ,rendererOptions: { forceTickAt0: true}
                    //,min: 0
                    //,tickOptions:{formatString: '%.0f'},
                } 
            }    
            ,negativeSeriesColors:['#F08080']   
            /*,legend: {
                show: true 
                ,location: 'e'
                ,placement: 'outsideGrid'
            }*/
            ,highlighter:{
                show: true
                ,tooltipLocation: 's'
                ,yvalues: 2
                ,bringSeriesToFront:true
                ,showMarker:false
                ,tooltipAxes: 'y'
                ,formatString: "%n%s"
            }
            ,cursor:{
                show: true
                ,zoom:true
                ,showTooltip:false
                ,constrainZoomTo: 'y'
            }
            ,grid:{
                background: '#f8f8f8'
            }               
        };

2 回答

  • 4

    我相信你要找的是jqplot CanvasOverlay功能http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html在函数中声明所有选项和数据之后(在你的例子中"grid"选项之后):

    grid:{
        background: '#f8f8f8'
    },
    canvasOverlay: {
                        show: true,
                        objects: [
                            {horizontalLine: {
                                name: 'avergae',
                                y: 20.8, //**AVERAGE_FLOAT_VALUE**
                                lineWidth: 2,
                                color: 'black',
                                shadow: false
                            }}
                        ]
                    }
    

    EDIT: 是的,抱歉 . 一定不要忘记包括"jqplot.canvasOverlay.min.js "

  • 2

    嗨,我认为最好实现一个自动计算数据点到阵列的平均值的函数 . 实际上你的酒吧字符的平均值大约是18而不是20!我建议实现一个功能来做这个 . 见this jsFiddle示例 . 有一篇文章展示了如何绘制和计算条形图的统计数据:此链接的平均值,中位数,模式和标准差:http://www.meccanismocomplesso.org/en/mean-mode-median-barchart/ .

    Array.prototype.average=function(){
        var sum=0;
        var j=0;
        for(var i=0;i<this.length;i++){
            if(isFinite(this[i])){
              sum=sum+parseFloat(this[i]);
               j++;
            }
        }
        if(j===0){
            return 0;
        }else{
            return sum/j;
        }
    }
    

    ...

    canvasOverlay: {
                        show: true,
                        objects: [
                            {dashedHorizontalLine: {
                                name: 'average',
                                y: data.average(),
                                lineWidth: 3,
                                color: 'black',
                                shadow: false
                            }}                  
                       ]             
                  }
    

相关问题