使用chart.js構建條形圖

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

...它說有不能「讀取屬性長度未定義」。

什麼是錯誤以及如何糾正它？

來源

2017-06-09 Aishwarya

嗨@Aishwarya，我想通過格式化打撈碼。我在' <畫布ID = 「畫布」 WIDTH = 「256」 HEIGHT =「256 「> \t \t – Aishwarya

試試這個代碼： 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);

來源

2017-06-09 10:20:23

沒有，它也不會被這種方式工作。我輸入2個文件的HTML文件只有畫布和Js文件有Js代碼...它說$沒有定義.:/ – Aishwarya

@aishwarya添加jQuery參考來修復$未定義的問題 –

約瑟夫我已經取得了一些修正腳本如下。它的工作很好嘗試這個。

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

來源

2017-06-09 11:08:21

順便說一句我的代碼工作正常。 –

使用chart.js構建條形圖

回答

相關問題