Как получить простую строку для среднего значения на гистограмме в 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 
         }} 
        ] 
       } 

EDIT: Да, сожалею об этом. не забудьте включить «jqplot.canvasOverlay.min.js»

Answer 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 
         }}     
        ]    
       }