ChartJS的「Hello World」不是動畫

我一直在試圖從http://www.chartjs.org/docs/latest/工作得到ChartJS例子，但我跑成兩個意外的問題：ChartJS的「Hello World」不是動畫

的圖不是動畫
圖表是巨大的（它似乎忽略了canvas元素上的高度/寬度屬性）。

片段（從文檔中複製）是在這裏：https://codepen.io/anon/pen/KmOQoj

<html> 
<head> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"> 
</script> 
<script> 
function load() { 
var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 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 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 
} 
</script> 
</head> 
<body onload="load()"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</body> 
</html>

來源

2017-05-31 plexer

這裏是工作的代碼

保持內部的div畫布，設置高度和寬度的DIV，使圖表作爲響應

function load() { 
 
    var ctx = document.getElementById("myChart").getContext('2d'); 
 
    var myChart = new Chart(ctx, { 
 
     type: 'bar', 
 
     responsive:true, 
 
    maintainAspectRatio: false, 
 
     data: { 
 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
      datasets: [{ 
 
       label: '# of Votes', 
 
       data: [12, 19, 3, 5, 2, 3], 
 
       backgroundColor: [ 
 
        'rgba(255, 99, 132, 0.2)', 
 
        'rgba(54, 162, 235, 0.2)', 
 
        'rgba(255, 206, 86, 0.2)', 
 
        'rgba(75, 192, 192, 0.2)', 
 
        'rgba(153, 102, 255, 0.2)', 
 
        'rgba(255, 159, 64, 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 
 
      }] 
 
     }, 
 
     options: { 
 
      scales: { 
 
       yAxes: [{ 
 
        ticks: { 
 
         beginAtZero:false 
 
        } 
 
       }] 
 
      } 
 
     } 
 
    }); 
 
}

<html> 
 
<head> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
 
</head> 
 
<body onload="load()"> 
 
    <div style="width:400px;height:400px"> 
 
<canvas id="myChart" width="400" height="400"></canvas> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-05-31 16:54:29

這裏是我的codepen https://codepen.io/dineshu07/pen/ZKgrNW –

ChartJS的「Hello World」不是動畫

回答

相關問題