增加Chart.js比例填充/保證金

當前代碼：

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,{ 
 
\t 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>

的jsfiddle：
https://jsfiddle.net/palaceslittle/mfvmoy64/217/

來源

2017-06-05 nawelittle

上升的空間。 – nawelittle

@ℊααnd和我正在使用單個欄。我感興趣的是能夠控制邊緣和酒吧之間的距離。 https://imgur.com/a/z2YHZ – nawelittle

你想讓酒吧變瘦，還是圖形變大？ –

一旦你更新到chart.js之（目前V2.6.0）的最新版本，在酒吧配置部分，你可以設置一個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/

來源

2017-06-05 19:33:15

你能告訴我一個這個代碼的例子嗎？選項：{ 佈局：{ 填充：{ 左：0，右：50，頂部：0，底部：0 } } } – nawelittle

@nawelittle我添加鏈接到答案。 –

不是預期的結果。這正是我需要的 http://imgur.com/a/Qvrc5 – nawelittle

增加Chart.js比例填充/保證金

回答

相關問題