Chart.jsの2つの異なる棒グラフの棒間の間隔を保持する方法2

Question

Chart.jsを使用して、同じオプションオブジェクトを使用しているデータ量が異なる2つの横棒グラフがあります。棒グラフ間のマージンに関して、下（「場所」）チャートを上（「色」）のように見せる方法はありますか？

私のオプションのオブジェクトは次のようになります、私は困惑しています：

 options={{ 
     elements: { 
      rectangle: { 
      borderSkipped: 'left', 
      }, 
     }, 
     onClick: this.chartLink, 
     animation: false, 
     legend: { 
      display: false, 
     }, 
     tooltips: { 
      enabled: false, 
     }, 
     maintainAspectRatio: true, 
     scales: { 
      xAxes: [{ 
      gridLines: { 
       display: false, 
       drawBorder: false, 
      }, 
      ticks: { 
       beginAtZero: true, 
       display: false, 
      }, 
      }], 
      yAxes: [{ 
      tabIndex: 0, 
      maxBarThickness: 100, 
      categoryPercentage: 1.0, 
      barPercentage: 1.0, 
      barThickness: 20, 
      gridLines: { 
       display: false, 
       drawBorder: false, 
      }, 
      ticks: { 
       fontColor: 'black', 
       fontStyle: 'normal', 
       maxTicksLimit: 5, 
       paddingLeft: 20, 
       mirror: true, 
      }, 
      }], 
     }, 

Answer 1

あなたは2つのチャート内の要素の＃の比率に合わせて、2番目のグラフの高さを拡張することができます。

Chart.jsにはキャンバスの周りにコンテナが必要なため、動的にサイズを変更できるため、htmlにも追加する必要があります。

は私が

// scale second chart based on ratio of data to the first 
var fiddleFactor = 1.05; // determined by guesswork. Basic ratio is slightly off. 
var ratio = data2.labels.length * fiddleFactor/data1.labels.length; 

var container1Height = parseInt(document.getElementById("container1").style.height); 

// update height of second chart 
document.getElementById("container2").style.height = container1Height * ratio + 'px'; 

<div id="container1" class="chart-container" style="position: relative; height:300px;"> 
    <canvas id="myChart"></canvas> 
</div> 
<div id="container2" class="chart-container" style="position: relative; height:300px;"> 
    <canvas id="myChart2"></canvas> 
</div> 

デモhttp://plnkr.co/edit/LZMAtY0MOQpLunyGhpzH?p=preview