Question

我想用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>

...它说不能“读取属性长度未定义”。

错误是什么以及如何纠正？

Answer 1

试试这段代码： 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);

Answer 2

约瑟夫我在剧本中做了一些修正如下。它的工作正常试试这个。

<script>
      var chr = document.getElementById("canvas");      
      var ctx = chr.getContext("2d");    	
	    ctx.canvas.width = 800;
	    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>

使用chart.js构造条形图

2 个答案: