2017-01-11 26 views
0

私は、次の棒グラフがありますChart.js水平バー幅

bar chart

上記のチャートは次のコードで生成されます:あなたが見ることができるように

var myChart = new Chart(ctx, { 
    type: 'horizontalBar', 
    data: { 
     labels: labels, 
     datasets: [{ 
      label: '# of Votes', 
      data: data, 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ] 
     }] 
    }, 
    options: { 
     responsive: true, 
     scales: { 
      yAxes: [{ 
       borderWidth: 40, 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

、バー幅をかなり小さいです。

私の質問は、どのように各バーの幅を増やすことができますか?

+1

バーの幅は、データによって定義されますか。 –

+0

これがなぜ落とされているのか分かりませんが、私は同じ問題に遭遇していますが、横棒グラフでのみ実行しています。 @SvenKoluem OPは、ChartJSの場合、横棒グラフか標準かを問わず、X軸の幅を参照しています。会話のために、我々は垂直高さについて話している。 –

答えて

0

これは公式の修正はありませんが、それは私のために働きました。 https://github.com/chartjs/Chart.js/issues/2787

私はすべての値を複数の配列に格納していますので、オブジェクトの数を数え、グラフラッパーの特定の数と高さを掛けてください(グラフの周りのdiv)。チャートを描画された後

<div class="chart-wrapper horizontalBar" style="position: relative; height: 50vh;"> 
    <canvas id="chart-location"></canvas> 
</div> 

、高さを設定(location_labelsはすべて私のラベルを収容する配列である)

$(".horizontalBar").height(location_labels.length * 30); 
関連する問題