Question

正如您在下面突出显示的canvas元素所示，x轴标签下方有相当大的空白。如果我调整画布大小，则空白与其高度成比例。有没有控制这个空格的设置？我已经排除了填充，但没有看到任何边距设置。

谢谢！

以下是呈现图表的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

将tickMarkLength更改为0不会导致图表左侧或底部（或您的坐标轴所在的位置）的空白。

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

tickMarkLength

网格线将绘制到轴区域中的像素长度。

const options = {
  scales: {
    xAxes: [
      {
        ticks: {
          display: false,
        },
        gridLines: {
          display: false,
          tickMarkLength: 0,
        },
      },
    ],
    yAxes: [
      {
        ticks: {
          display: false,
        },
        gridLines: {
          display: false,
          tickMarkLength: 0,
        },
      },
    ],
  },
};

Answer 2

我知道你说你排除了填充，但这是我能看到工作的唯一选择：

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

显然，您可以使用-20来播放适合您的内容。

如果你想看到更多

，这是chartjs的reference for padding

编辑：

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

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

2 个答案:

编辑：