畫布不顯示正確的寬度和高度chart.js之

我用畫布寬度和highth如下畫布不顯示正確的寬度和高度chart.js之

<canvas id="myChart" height="400" width="400" ></canvas>

然而，當頁面呈現在畫布上莫名其妙地變成

<canvas height="1643" id="myChart" width="1643" style="display: block; width: 1643px; height: 1643px;"></canvas>

我發現similar problem並且這樣的解決方案也適用於我，

options: { 
    responsive: false 
}

但我不確定這是否正確ution只是關閉響應選項becaouse是在chart.js之酷的事情之一

我的代碼

<Html> 
<head> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js" ></script> 
</head> 

<Body> 
    <canvas id="myChart" height="400" width="400" ></canvas> 
</Body> 
<script> 
     var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Steps', 
        data: [12, 19, 3, 5, 2, 3], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 

        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(255, 206, 86, 1)', 
         'rgba(75, 192, 192, 1)', 
         'rgba(153, 102, 255, 1)', 
         'rgba(255, 159, 64, 1)' 
        ], 
        borderWidth: 1 
       }, 

       { 
       label: "Goal Line", 
        type:'line', 
        data: [{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10},{x:0,y:10}], 
        fill: false, 
        pointRadius:[0,0,0,0,0,0,0], 
        borderWidth: 5, 
        borderColor: "rgba(243, 52, 52,1)", 
        borderJoinStyle: 'miter',             

      } 

       ] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         },   
        }], 
         xAxes: [{ 
         ticks: { 
          beginAtZero:true 
         }, 

        }] 
       }, 

      } 
     }); 

</script> 

</Html>

來源

2016-09-04 ketchyn

您可以使用CSS最大寬度和最小寬度，如果你想避免你的圖表從太大或太小：

<canvas id="myChart" height="400" width="400" style="min-width: 200px; max-width: 600px"></canvas>

來源

2016-09-04 21:05:49 Daniel

畫布不顯示正確的寬度和高度chart.js之

回答

相關問題