（Chart.js）網頁不顯示圖表，在控制檯中沒有錯誤

我是chart.js的新手，嘗試構建簡單的東西。我在控制檯中沒有錯誤，但圖表不顯示在我的網頁上。我不知道它來自哪裏。（Chart.js）網頁不顯示圖表，在控制檯中沒有錯誤

如果有人能幫上忙，那真是太好了。

<!DOCTYPE> 
<html> 
<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 

</head> 

<body> 

    <div id="center"><canvas id="canvas" width="600" height="400"></canvas></div> 

    <script> 


    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    var datas = { 
     labels: ["2010", "2011", "2012", "2013"], 
     datasets: [ 
      { 
       type: "line", 
       data : [150,200,250,150], 
       color:"#878BB6", 
      }, 
      { 
       type: "line", 
       data : [250,100,150,10], 
       color : "#4ACAB4", 
      } 
     ] 
    } 

    </script> 
</body> 
</html>

來源

2017-06-27 Kat

您沒有正確構建圖表。下面是它應該如何創建...

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ["2010", "2011", "2012", "2013"], 
 
     datasets: [{ 
 
     label: 'Dataset 1', 
 
     data: [150, 200, 250, 150], 
 
     color: "#878BB6", 
 
     }, { 
 
     label: 'Dataset 2', 
 
     data: [250, 100, 150, 10], 
 
     color: "#4ACAB4", 
 
     }] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<div id="center"> 
 
    <canvas id="canvas" width="600" height="400"></canvas> 
 
</div>

要了解更多關於ChartJS，請參閱official documentation。

來源

2017-06-27 17:20:50

你說的對，我沒有建立它的好方法。非常感謝你 – Kat

（Chart.js）網頁不顯示圖表，在控制檯中沒有錯誤

回答

相關問題