2

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'
            }               
        };
4

2 に答える 2

2

こんにちは、配列内のデータ ポイントの平均を自動的に計算する関数を実装する方がよいと思います。実際、バーチャーの平均は約 18 で、20 ではありません!! これを行うための関数を実装することをお勧めします。この jsFiddle の例を参照してください。棒グラフの統計を描画して計算する方法が示されている記事があります: 平均、中央値、最頻値、標準偏差: http://www.meccanismocomplesso.org/en/mean-mode-median-棒グラフ/ .

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-26T23:07:07.087 に答える