如何在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中的條形圖上獲取一條簡單的線條圖

回答

相關問題