2017-06-09 14 views
-1

chart.jsを使用して棒グラフを作成したかったのです。私はこのコードを入力しました:chart.jsを使用して棒グラフを作成する

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bar chart</title> 
    <script src="Chart.js"></script> 
</head> 
<body> 
    <canvas id="canvas" width="256" height="256"></canvas> 
    <script> 
     var my = new Chart(chr).Bar(data); 
     var chr = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 
     var data = { 
      dataset: [ 
       { 
        label: "my first dataset", 
        fillColor: "blue", 
        strokeColor: "green", 
        data: [65, 53, 80, 83, 55, 45] 
       } 
      ] 
     }; 
     var myfirstChart = new Chart(chr).Bar(data); 
    </script> 
    console.log(ctx); 
</body> 

</html> 

... "プロパティの長さは未定義です"ということはありません。

エラーとはどのようなものですか?修正方法は?

+0

こんにちは@Aishwarya、私はそれをフォーマットして、コードを救済しようとしました。私は ' <キャンバスのid = "キャンバス" 幅= "256" 高さ= "256 "> \t \t – Aishwarya

答えて

0

は、このコードを試してみてください: HTML:

<canvas id="canvas" width="256" height="256"></canvas> 

のJs:

var chr = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var data = { 
     type: "bar", 
     data: { 
     labels: ["One", "Two"], 
     datasets: [{ 
      label: "my first dataset", 
      backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C"], 
      fillColor: "blue", 
      strokeColor: "green", 
      data: [65, 53] 
     }] 
     } 
    }; 
    var myfirstChart = new Chart(ctx, data); 
+0

いいえ、それはどちらか、このように動作していません。私は2つのファイルをhtml filsのみキャンバスとjsファイルを持つJsコードを持っている...それは$が定義されていないと言う:/ – Aishwarya

+0

@aishwarya修正するためにjQueryの参照を追加します$定義されていない問題 –

0

ジョセフ、私は次のようにスクリプト内のいくつかの修正を行っています。そのうまくいくのはこれを試してみてください

<script> 
 
     var chr = document.getElementById("canvas");  
 
     var ctx = chr.getContext("2d");  \t 
 
\t  ctx.canvas.width = 800; 
 
\t  var data = { 
 
     type: "bar", 
 
     data: { 
 
     labels: ["One", "Two"], 
 
     datasets: [{ 
 
      label: "my first dataset", 
 
      backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C"], 
 
      fillColor: "blue", 
 
      strokeColor: "green", 
 
      data: [65, 53] 
 
     }] 
 
     } 
 
    }; 
 
      
 
     
 
    var myfirstChart = new Chart(chr , data); 
 
    </script>

+0

私のコードはうまくいきます。 –

関連する問題