Question

我遇到了一个我收到

的问题

Uncaught TypeError: Cannot read property 'getContext' of null

我的canvas标签，我知道它是由加载HTML文档之前运行的javascript引起的，但我认为window.onload会确保javascript在页面加载后运行。关于我出错的地方有任何帮助吗？

HTML：

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.min.js"></script>
        <script src="chartData.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <div style="width: 50%">
        <canvas id="canvas" height="450" width="600"></canvas>

</body>

chartData.js

window.onload = function(){

    var ctx = document.getElementById("chart").getContext("2d");


    var myNewChart = new Chart(ctx).Bar(data, options);     

};

var data = {
    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    datasets: [
        {
            label: "Number of Check-Ins",
            fillColor: "#81E6B3",
            strokeColor: "#177A9C",
            highlightFill: "#4E5C61",
            highlightStroke: "#A428C7",
            data: [20, 80, 30, 120, 12, 48, 12]

        }
    ]
};

var options = {
    scaleBeginAtZero : true,
    scaleShowGridLines : true,
    scaleGridLineColor : "#E69681",
    scaleGrideLineWidth : 1,
    barShowStroke : true,
    barStrokeWidth : 2,
    barValueSpacing : 5,
    barDataSetSpacing : 1
};

带有canvas标签的null的getContext

0 个答案: