如何在jqPlot中的条形图上获取一条简单的线条图

我正在使用jqPlot中的条形图图表，我需要在图表上用单独的一行显示平均值。我的问题是如何做到这一点？我需要为此使用折线图吗？我已经看过几个折线图例子，但它们在条形图中显示为趋势图，从图表上的第一个条形图开始，而不是显示平均值。我需要的是使用显示的所有条形图的平均值在图表上（屏幕截图如下）如何在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' 
      }    
     };

来源

2013-09-30 shaz

我相信你正在寻找的是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”

来源

2013-09-30 13:36:03

我认为Ovi全福莱为您提供了一个很好的答案。您可以在绘制图形之前计算average_float_value，并使用变量来存储它并将其显示在jqplot中 – AnthonyLeGovic

感谢您的提问。我当然需要这个属性。您显示的示例不包括必需的脚本jqplot.canvasOverlay.min.js。 – shaz

嗨我认为最好是实现一个函数，自动计算到数组中的数据点的平均值。事实上，你的酒吧char的平均值大约是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 
         }}     
        ]    
       }

来源

2013-12-26 23:07:07

如何在jqPlot中的条形图上获取一条简单的线条图

回答

相关问题