javascript - 如何从 chart.js 中的折线图底部删除多余的空格？

Question

正如您在下方突出显示的 Canvas 元素所见，x 轴标签下方有相当大的空白。如果我调整 Canvas 的大小，空白将与其高度成比例。是否有控制此空白的任何设置？我已经排除了填充并且没有看到任何边距设置。

谢谢!

这是呈现图表的 JavaScript:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: true
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 1
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
          drawBorder: false
        },
        ticks: {
          callback: function(value, index, values) {
            return '$' + addCommas(value);
          }
        }
      }]
    },
    layout: {
      padding: 5
    }
  },
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      { 
        data: values,
        fill: false,
        borderColor: "blue"
      }
    ]
  }
});

以及完整的 jsfiddle:https://jsfiddle.net/rsn288fh/2/

Answer 1

我知道你说过你排除了填充，但这是我认为可行的唯一选择:

options: {
    layout: {
        padding: {
            bottom: -20
        }
    }
}

显然，您可以根据自己的需要使用 -20。

这是 reference for padding对于 chartjs，如果你想看到更多

编辑:

我已经更新了你的 jsfiddle ，图表下方有一个彩色 div。当您调整大小时，它似乎停留在图表下方的同一位置。