使用 ChartJS 设置图表大小

Question

要在 ChartJS 中设置图表大小，我们建议使用 responsive 选项，使图表填充其容器。 你 必须 包装图表 canvas 标记在 div 为了 responsive 生效。 您不能设置 canvas 元素大小直接与 responsive。

下面是一个填充其容器的图表，它恰好是 Mastering JS 文本容器的精确宽度。

以下是上述图表的 HTML。

<style>
  #chart-wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
  }
</style>
<div>
  <canvas></canvas>
</div>

以下是图表的 JavaScript：

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Easy as',
      data: [1, 2, 3],
    }],
  },
  options: {
    responsive: true
  }
});