Chart.jsアスペクト比/強制的な高さ

Question

chart.jsを使用してサムネイルを作成しようとしています。このサムネイルは、フルチャートのページにリンクします。リンクされたページのフルチャートは見栄えが良いですが、サムネイルではサイズを正しく取得できません。キャンバスが右の領域をカバーしていますが、グラフが垂直に塗りつぶされていません。

var data = { 
    labels: ['','','','','','','','','',''], 
    datasets: [{ 
     data:[22,25,23,24,25,22,25,23,24,25], 
      backgroundColor: "rgba(54, 255, 170, 0.4)", 
      borderColor: "rgba(54, 255, 170, 1)", 
      orderWidth: 1, 
    }] 
}; 
var options = { 
    tooltips: false, 
    legend: { 
     display:false 
    }, 
    scales: { 
     yAxes: [{ 
      display:false, 
      ticks: { 
       beginAtZero:true 
      } 
     }], 
     xAxes: [{ 
      gridLines: { 
       color: "rgba(0, 0, 0, 0)", 
      } 
     }] 
    } 
}; 

new Chart($("#chart-"+this.model.id), { 
    type: 'bar', 
    data: data, 
    options: options   
}); 

私は、キャンバスの分の高さを調整するようなものを試してみたが、それはバーがあいまいになります。キャンバス全体を占めるバーの高さを調整する方法はありますか？

Answer 1

は、これらのオプションを設定してください：

options: { 
    responsive: true, 
    maintainAspectRatio: false 
} 

あなたがtrueにmaintainAspectRatioを設定した場合、高さが自動的に計算されます。