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

Question

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

我用于绘制数据的 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'
            }               
        };  

Answer 1

我相信您正在寻找的是 jqplot CanvasOverlay 功能 http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html在函数中声明所有选项和数据后(在“网格”选项之后的示例中):

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

编辑:是的，对此感到抱歉。确保不要忘记包含“jqplot.canvasOverlay.min.js”