Chart.js 的自动高度

【问题标题】：Automatic Height for Chart.jsChart.js 的自动高度
【发布时间】：2016-05-19 23:06:01
【问题描述】：

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

我的画布元素上没有内联样式，一次下面的样式起作用了我去检查元素。我不确定图表在哪里或如何获得这些内联样式。

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

【问题讨论】：

maintainAspectRatio:false - 试试这个
@crc442 不，当我检查元素时仍然只捕捉到正确的大小。
你能粘贴一些相关的代码吗？
我认为图表可能在元素实际可见之前被初始化，您需要在窗口上触发 Resize 事件一旦可见或触发图表的重新渲染..

标签： javascript charts bar-chart

【解决方案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？在您的屏幕视频中，它无论如何都在另一个 div 内，所以我也会尝试使用 height 播放。最后，我会避免使用全局canvas CSS 选择器——而是使用canvas#barChart，否则它将应用于所有画布，而不仅仅是chartjs。

【讨论】：