圖表js不顯示

我正在嘗試使用charts.js創建一個簡單的線條圖。當我運行下面的代碼時，不會出現圖表。我究竟做錯了什麼？我下面這個教程http://www.chartjs.org/docs/latest/getting-started/圖表js不顯示

<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Chart.js demo</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> 

</head> 
<body> 


    <h1>Chart.js Sample</h1> 

    <canvas id="myChart" width="600" height="400"></canvas> 
     <script> 
     var ctx = document.getElementById('myChart').getContext('2d'); 
     var chart = new Chart(ctx, { 
     // The type of chart we want to create 
     type: 'line', 

     // The data for our dataset 
     data: { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [{ 
       label: "My First dataset", 
       backgroundColor: 'rgb(255, 99, 132)', 
       borderColor: 'rgb(255, 99, 132)', 
       data: [0, 10, 5, 2, 20, 30, 45], 
      }] 
     }, 

     // Configuration options go here 
     options: {} 
    }); 
    </script> 
</body> 
</html>

來源

2017-06-17 amanda45

您正在使用的版本0.2.0。如果您使用演示版本（2.4.0）或最新版本（2.6.0），則工作良好。該CDN鏈接，這是https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Chart.js demo</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <h1>Chart.js Sample</h1> 
 

 
    <canvas id="myChart" width="600" height="400"></canvas> 
 
    <script> 
 
    var ctx = document.getElementById("myChart").getContext("2d"); 
 
    var chart = new Chart(ctx, { 
 
     // The type of chart we want to create 
 
     type: "line", 
 
    
 
     // The data for our dataset 
 
     data: { 
 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
     datasets: [ 
 
      { 
 
      label: "My First dataset", 
 
      backgroundColor: "rgb(255, 99, 132)", 
 
      borderColor: "rgb(255, 99, 132)", 
 
      data: [0, 10, 5, 2, 20, 30, 45] 
 
      } 
 
     ] 
 
     }, 
 
    
 
     // Configuration options go here 
 
     options: { 
 
     responsive:false, 
 
     maintainAspectRatio: false 
 
     } 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

來源

2017-06-17 20:45:30

爲什麼它洙很大> – amanda45

@ amanda45如果你想讓它尊重高度/寬度您定義，使用選項'迴應：假的，維護AspectRatio：false'更新了我的答案 –

- 非常感謝您的幫助 – amanda45

圖表js不顯示

回答

相關問題