X軸的Chart.js標簽在圖表區域中產生無用的空間

Question

是否可以刪除標記為紅色的額外空間？

會發生什么，如果標簽變長，空間也會變長。

這是我的chart.js設置代碼：

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: DATA.label,
            datasets: [{
                data: DATA.count,
                borderColor: [
                    'navy'
                ],
                borderWidth: 1
            }]
        },
        options: {
          scales: {
              yAxes: [{
                ticks: {
                  max: 30,
                  beginAtZero:true
                }
              }]
          },
        }
    });

Answer 1

嘗試更新到最新版本的Chart.js （目前為2.7.2）。

正如您所看到的，如果您運行以下代碼段（使用您添加到問題中的代碼創建），生成的圖表的比例很均勻，右側沒有額外的空間。

 var myChart = new Chart(document.getElementById('chart'), { type: 'line', data: { labels: ['2018-09-12', '2018-09-13'], datasets: [{ data: [14, 10], borderColor: [ 'navy' ], borderWidth: 1, label: '# of votes', fill: false }] }, options: { scales: { yAxes: [{ ticks: { max: 30, beginAtZero: true } }] }, } }); 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <canvas id="chart"></canvas>