ボーダーとバーの間隔を広げるにはどうすればよいですか?
サンプル画像:
http://imgur.com/a/AamLT
現在のコード:
var canvas = document.getElementById('myChart');
var data = {
labels: ["January"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 30, 81, 56, 55, 40],
}
]
};
var option = {
};
var myBarChart = Chart.Bar(canvas,{
data:data,
options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="500"></canvas>
Chart.jsの最新バージョン(現在はv2.6.0)に更新したら、bar configセクションでmaxBarThickness
を設定できます。これにより、棒が大きくなることを心配する必要なく、チャートキャンバスの幅を広げることができます。
options
セクションは次のようになります。
var option = {
scales: {
xAxes: [{
maxBarThickness: 100
}]
}
};
JSFiddle: https://jsfiddle.net/dhhnssgc/
棒グラフの構成オプションの詳細については、以下のドキュメントを参照してください。
http://www.chartjs.org/docs/latest/charts/bar.html#configuration-options
グラフの残りの設定方法によっては、barPercentage
およびbarThickness
オプションも機能する場合があります。
チャート全体をキャンバスの端から移動したい場合は、レイアウトパディングオプションを使用できます。 http://www.chartjs.org/docs/latest/configuration/layout.html
options: {
layout: {
padding: {
left: 0,
right: 50,
top: 0,
bottom: 0
}
}
}
JSFiddle: https://jsfiddle.net/dhhnssgc/2/