Chartjs：グループ化中に異なる平均行を表示

Question

現在、私はchartjsで作業していますが、それは（少なくとも通常のタスクでは）学ぶのが非常に速いことがわかりました。現在、私は問題に直面しています。棒グラフ。図のように。 grouped bar char

30-08-2016の日付のように、B、C、Dの3つの異なる値がありますが、31-09-2016の同じデータグループの値は異なります。

私はこのように見えるようにチャート に各異なる群の平均の行を追加することも頼まれた：

grouped bar chart with averages

私が関連するバーグループと1本の平均線の開始をバインドする必要があります。 インターネットに接続していますが、サンプルが見つからない場合があります。例がある場合は教えてください。事前に感謝

Answer 1

これは私のソリューションでした：私はプラグインを作成し、グラフの各コンポーネントの行を描画しようとした。

chart result

：コードは（私はきれいにしようとするでしょう）

      // Define a plugin to provide average for different groups of data 
         Chart.plugins.register({                
          afterDatasetsDraw: function(chartInstance, easing) { 
           // To only draw at the end of animation, check for easing === 1 
           { 

            var ctx = chartInstance.chart.ctx; 
            var mapAverageLinePoints = {}; 

            chartInstance.data.datasets.forEach(function (dataset, i) { 
             var meta = chartInstance.getDatasetMeta(i);             
             if (!meta.hidden) {            
              meta.data.forEach(function(element, index) {                          
               var dataString = dataset.label; 
               var groupAverageLine = mapAverageLinePoints[dataString]; 
               if(groupAverageLine==null) 
               { 
                groupAverageLine = []; 
               } 
               //store the point coordinate and the value 
               var linePoint = 
               { 
                 x : position.x, 
                 y : position.y, 
                 value: dataset.data[index], 
                 avg : 0 
               } 
               //adding the point to the array going to be stored in the map that group the point by the label 
               groupAverageLine.push(linePoint); 
               mapAverageLinePoints[dataString]=groupAverageLine; 
              } 

              );                      
             } 
            }); 

            for (var type in mapAverageLinePoints) { 
             var avgLinePoints = mapAverageLinePoints[type]; 
             //NON E' in valore bensì rispecchia la sommatoria dei posY utilizzati nella rappresentazione 
             var totalYAxis=0; 
             var totale=0; 
             var labelNumero=0; 
             for(var k=0;k<avgLinePoints.length;k++) 
             { 
              var point = avgLinePoints[k]; 
              totalYAxis+=point.y; 
              totale+=point.value; 
              //jump the first one 
              if(k>=1) 
              {                 
               var prevPoint = avgLinePoints[k-1]; 
               //k start from 0!!!! 
               var avgYAxis = (totalYAxis/(k+1)); 
               var avg = (totale/(k+1)); 

               // here i draw the line starting from the previous average 
               ctx.beginPath(); 
               ctx.moveTo(point.x, avgYAxis); 
               ctx.strokeStyle = '#979797'; 
               ctx.lineTo((prevPoint.x), prevPoint.avg); 
               ctx.stroke(); 
               point.avg=avgYAxis; 
               //this one is for drawing a "o" where two segments collide 
               var fontSize = 12; 
               var fontStyle = 'normal'; 
               var fontFamily = 'Helvetica Neue'; 
               ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);             
               ctx.fillText("avg: "+(avg/range).toLocaleString() + rangeSuffix + ' €', point.x, point.y+(point.value>0?-30:+10)); 
              } 
              else{ 
               //for the first one only record the y as the avg 
               point.avg=point.y; 
              } 
              var fontSize = 10; 
              var fontStyle = 'normal'; 
              var fontFamily = 'Helvetica Neue'; 
              ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 
              ctx.fillText("o", point.x, point.avg); 
             }           
             labelNumero=labelNumero+1; 
            } 
           } 
          } 
         }); 

結果は、これが1である、非常に厄介です