Chart.js 的自动高度

Question

我正在使用 Chart.js 正确跟踪文档，并且我的条形图显得太大，直到我单击检查元素，然后图表似乎调整大小并卡入正确的位置。

问题的快速截屏

我的画布元素上没有内联样式，一旦我转到 Inspect Element ，就会使用以下样式。我不确定图表在哪里或如何获得这些内联样式。

canvas{
 width: 100% !important;
 max-width: 800px;
 height: auto !important;}

Answer 1

尝试

var barChart = new Chart(ctx, {
  type: 'bar',
  responsive: true,
  maintainAspectRatio: false,
  data: {
    ...
  },
  options: {
    animation: {
      onComplete: function (animation) {
        this.options.animation.onComplete = null; // disable after the first render
        animation.chartInstance.resize()
      }
    }
  }
});

作为替代方案，为什么将 设为width100% 而不是height？在你的屏幕视频中，它div无论如何都在另一个屏幕视频中，所以我也尝试用它来玩height。最后，我会避免使用全局canvasCSS 选择器——而是使用canvas#barChart，因为否则它将应用于所有画布，而不仅仅是画布chartjs。