Chart.js忽略画布的高度和宽度

Question

根据Chart.js文档，我正在尝试绘制一个小图表：

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels:['15-2016','16-2016','17-2016',],
    datasets:[
      {
        label:'Yes',
        data:[3.4884,1.1628,1.3514,],
        backgroundColor:'rgba(75,192,192,1)',
        borderColor:'rgba(75,192,192,1)',
        pointRadius:0
      },
      {
        label:'Maybe',
        data:[0.5571,1.3298,0.791,],
        backgroundColor:'rgba(255,206,86,1)',
        borderColor:'rgba(255,206,86,1)',
        pointRadius:0
      },
      {
        label:'No',
        data:[0,0,0,],
        backgroundColor:'rgba(255,99,132,1)',
        borderColor:'rgba(255,99,132,1)',
        pointRadius:0
      }
    ]
  }        
});
</script>

然而，当页面被渲染时，画布会以某种方式变得

<canvas style="height: 929px; width: 929px;" id="myChart" width="1858" height="1858"></canvas>

对于我的需求来说，它太大了。我该如何设置画布的宽度和高度以符合我的要求？

- wogsland

---

如果您能够进入Chart.js的core.helper.js文件并在其中设置断点，那么它将从canvasElementReference.parentNode获取其高度。因此，如果CSS无法控制它，您可以添加CSS规则来样式化其父级，并让canvasElementReference.parentNode.clientWidth和heights基于CSS样式。这是实际的代码逻辑，如果您能够理解我的意思，它将为任何关心此问题的人解决您的问题。 - Coty Embry

Answer 1

我能够通过关闭响应式来硬编码图表的大小：

options: {
  responsive: false
}

- wogsland

---

它能工作但不完美，因为我只想修复高度而不是宽度，如果我只给高度，它会同时减小宽度。 - Syed Uzair Uddin

Answer 2

我通过在选项中添加“maintainAspectRatio: false”解决了问题。

options : {
    maintainAspectRatio: false
};

- Patrick Dorn

---

当应用此选项时，我的图表没有显示出来。 - notQ

Answer 3

使用maintainAspectRatio：false和responsive：false两个选项，可以使图表适合在canvas的高度和宽度标签中指定的大小。

- J E Carter II