Chart.js的自动高度

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Arul正在寻找来自信誉良好的来源的答案。

我使用Chart.js正确地遵循了文档，并且在我单击检查元素之前，我的条形图看起来太大了，然后该图似乎会调整大小并对齐到正确的位置。

Quick Screencast of Issue

我的canvas元素上没有内联样式，以下样式开始起作用once我去检查元素。我不确定图表从何处或如何获得这些内联样式。

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画布。