javascript - 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

尝试更新到 latest version of 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>