2017-06-27 14 views
0

私はchart.jsに新しく、単純なものを作成しようとしています。 コンソールにエラーはありませんが、Webページにはグラフが表示されません。どこから来たのか分かりません。(Chart.js)Webページにグラフが表示されず、コンソールにエラーが表示されない

誰かが助けてくれれば本当に素晴らしいだろう。

<!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> 

答えて

0

グラフを正しく構成していません。ここで

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>

official documentationを参照して、ChartJSについての詳細を学ぶために...それが作成する方法です。

+1

あなたはそうです、私はそれを良い方法で作りませんでした。ありがとうございましたℊααnd – Kat

関連する問題