Chart.jsスタックされたグループ化されたhorizo​​ntalBarチャート

Question

私はウェブページ上にやや複雑なデータを表示しようとしていましたが、そうするためにchart.jsを選択しました。 そのため、複数の積み重ね棒を水平にグループ化する必要があります。

"正常な"バーではこのフィドルはすでに見つかりましたが、まだhorizo​​ntalBarで動作するように変更できませんでした。

StackOverflowの質問：Chart.js stacked and grouped bar chart

オリジナルフィドル（http://jsfiddle.net/2xjwoLq0/）は

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar); 

を持っており、私は（まあ、これはしないだろうことを知って.horizo​​ntalBarとコードでどこでも.BARを置き換えますカット）。それは非常に仕事がなかったので、ここで横棒のために提案として

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.horizontalBar); 

は、私が第2の積層修飾子を追加してみました：（calculateBarY/calculateBarX）

を Horizontal stacked bar chart with chart.jsし、XとYの計算のための機能を反転し、どのスタックが互いに正しくマージされないためにどちらかがうまく動作します。

http://jsfiddle.net/2xjwoLq0/3/

誰もがこの1に私を助けることができれば私は幸いです。

Answer 1

似たようなものを探して、あなたが与えた例を見て、何かを書くことに決めました。

ではなく、コードを修正しようとしているか「groupableBar」を再利用して、私はChart.controllers.horizontalBarからChart.jsコードを取得し、機能calculateBarY、calculateBarHeightで一部を書き換えます。 例のgetBarCount関数を再利用しました。

Chart.defaults.groupableHBar = Chart.helpers.clone(Chart.defaults.horizontalBar); 
 

 
Chart.controllers.groupableHBar = Chart.controllers.horizontalBar.extend({ 
 
    calculateBarY: function(index, datasetIndex, ruler) { 
 
     var me = this; 
 
     var meta = me.getMeta(); 
 
     var yScale = me.getScaleForId(meta.yAxisID); 
 
     var barIndex = me.getBarIndex(datasetIndex); 
 
     var topTick = yScale.getPixelForValue(null, index, datasetIndex, me.chart.isCombo); 
 
     topTick -= me.chart.isCombo ? (ruler.tickHeight/2) : 0; 
 
     var stackIndex = this.getMeta().stackIndex; 
 

 
     if (yScale.options.stacked) { 
 
      if(ruler.datasetCount>1) { 
 
       var spBar=ruler.categorySpacing/ruler.datasetCount; 
 
       var h=me.calculateBarHeight(ruler); 
 
       
 
       return topTick + (((ruler.categoryHeight - h)/2)+ruler.categorySpacing-spBar/2)+(h+spBar)*stackIndex; 
 
      } 
 
      return topTick + (ruler.categoryHeight/2) + ruler.categorySpacing; 
 
     } 
 

 
     return topTick + 
 
      (ruler.barHeight/2) + 
 
      ruler.categorySpacing + 
 
      (ruler.barHeight * barIndex) + 
 
      (ruler.barSpacing/2) + 
 
      (ruler.barSpacing * barIndex); 
 
    }, 
 
    calculateBarHeight: function(ruler) { 
 
     var returned=0; 
 
     var me = this; 
 
     var yScale = me.getScaleForId(me.getMeta().yAxisID); 
 
     if (yScale.options.barThickness) { 
 
      returned = yScale.options.barThickness; 
 
     } 
 
     else { 
 
      returned= yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight; 
 
     } 
 
     if(ruler.datasetCount>1) { 
 
      returned=returned/ruler.datasetCount; 
 
     } 
 
     return returned; 
 
    }, 
 
    getBarCount: function() { 
 
     var stacks = []; 
 

 
     // put the stack index in the dataset meta 
 
     Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) { 
 
      var meta = this.chart.getDatasetMeta(datasetIndex); 
 
      if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) { 
 
       var stackIndex = stacks.indexOf(dataset.stack); 
 
       if (stackIndex === -1) { 
 
        stackIndex = stacks.length; 
 
        stacks.push(dataset.stack); 
 
       } 
 
       meta.stackIndex = stackIndex; 
 
      } 
 
     }, this); 
 

 
     this.getMeta().stacks = stacks; 
 

 
     return stacks.length; 
 
    } 
 
}); 
 

 

 

 

 
var data = { 
 
    labels: ["January", "February", "March"], 
 
    datasets: [ 
 
    { 
 
     label: "Dogs", 
 
     backgroundColor: "rgba(255,0,0,0.2)", 
 
     data: [20, 10, 25], 
 
     stack: 1, 
 
     xAxisID: 'x-axis-0', 
 
     yAxisID: 'y-axis-0' 
 
    }, 
 
    { 
 
     label: "Cats", 
 
     backgroundColor: "rgba(255,255,0,0.2)", 
 
     data: [70, 85, 65], 
 
     stack: 1, 
 
     xAxisID: 'x-axis-0', 
 
     yAxisID: 'y-axis-0' 
 
    }, 
 
    { 
 
     label: "Birds", 
 
     backgroundColor: "rgba(0,255,255,0.2)", 
 
     data: [10, 5, 10], 
 
     stack: 1, 
 
     xAxisID: 'x-axis-0', 
 
     yAxisID: 'y-axis-0' 
 

 
    }, 
 
    { 
 
     label: ":-)", 
 
     backgroundColor: "rgba(0,255,0,0.2)", 
 
     data: [20, 10, 30], 
 
     stack: 2, 
 
     xAxisID: 'x-axis-1', 
 
     yAxisID: 'y-axis-0' 
 
    }, 
 
    { 
 
     label: ":-|", 
 
     backgroundColor: "rgba(0,0,255,0.2)", 
 
     data: [40, 50, 20], 
 
     stack: 2, 
 
     xAxisID: 'x-axis-1', 
 
     yAxisID: 'y-axis-0' 
 
    }, 
 
    { 
 
     label: ":-(", 
 
     backgroundColor: "rgba(0,0,0,0.2)", 
 
     data: [60, 20, 20], 
 
     stack: 2, 
 
     xAxisID: 'x-axis-1', 
 
     yAxisID: 'y-axis-0' 
 
    }, 
 
    ] 
 
}; 
 

 
var ctx = document.getElementById("myChart").getContext("2d"); 
 
new Chart(ctx, { 
 
    type: 'groupableHBar', 
 
    data: data, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     stacked: true, 
 
     type: 'category', 
 
     id: 'y-axis-0' 
 
     }], 
 
     xAxes: [{ 
 
     stacked: true, 
 
     type: 'linear', 
 
     ticks: { 
 
      beginAtZero:true 
 
     }, 
 
     gridLines: { 
 
      display: false, 
 
      drawTicks: true, 
 
     }, 
 
     id: 'x-axis-0' 
 
     }, 
 
     { 
 
     stacked: true, 
 
     position: 'top', 
 
     type: 'linear', 
 
     ticks: { 
 
      beginAtZero:true 
 
     }, 
 
     id: 'x-axis-1', 
 
     gridLines: { 
 
      display: true, 
 
      drawTicks: true, 
 
     }, 
 
     display: false 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="myChart"></canvas>

はまたここにjsfiddleに例を置く：https://jsfiddle.net/b7gnron7/4/

コードを強くテストされていない、あなたが代わりにhorizo​​ntalBar使用（一つだけ積み重ねられたグループを表示しようとする場合は特に、いくつかのバグを発見したかもしれませんこの場合）。

あなたの投稿は、あなたはまだ解決策を必要としていることを確認していない...少し古いですが、それは他の人のために役に立つかもしれません^ _ ^にStackOverflowに