Chart.js的自动高度

Question

我正在使用Chart.js正确地跟踪文档，并且我的条形图看起来太大，直到我点击inspect元素，然后图表似乎调整大小并捕捉到正确的位置。

Quick Screencast of Issue

我的canvas元素上没有内联样式，以下样式开始一次我去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()
      }
    }
  }
});

作为替代方案，为什么将width设置为100％，而不设置height？无论如何，在您的屏幕vid中，它位于另一个div内部，所以我也尝试使用height播放。最后，我将避免使用全局canvas CSS选择器-而是使用canvas#barChart，因为否则它将应用于所有画布，而不仅是chartjs画布。