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>

這對我來說太大了。 如何將畫布的寬度和高度設置為我想要的？

Answer 1

我能夠通過關閉響應性來硬編碼圖形的大小：

options: {
  responsive: false
}

Answer 2

我通過在選項中添加“maintainAspectRatio：false”解決了這個問題。

options : {
    maintainAspectRatio: false
};

Answer 3

使用Both選項，maintainAspectRatio：false和responsive：false似乎可以使圖表適合畫布在畫布高度和寬度標簽中的大小。