グラフが表示されない

charts.jsを使用して簡単な折れ線グラフを作成しようとしています。下のコードを実行すると、グラフが表示されません。私は間違って何をしていますか？私はあなたがバージョン0.2.0を使用しているhttp://www.chartjs.org/docs/latest/getting-started/グラフが表示されない

<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

このチュートリアルを次しています。デモ版（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をあなたはそれが、高さはあなたが定義された幅/尊重 '応答オプションを使用する場合：、偽maintainAspectRatio：falseは私の答えを更新しました –

- あなたの助けをたくさんありがとうございます – amanda45

答えて

関連する問題