无法使用窗口onload方法加载我的图形

问题描述 投票:0回答:1

我想卸载我的init()函数和图形,这是一个窗口onload函数,但它不会加载我的图形。

<!DOCTYPE html>
<html>

<head>
  <title> Challenge </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="Css/ChallengeStyle.css" type="text/css"/>
  <script src="Js/Challenge.js"></script>
  <script src="lib/easeljs-NEXT.combined.js"></script>
  <script src="lib/tweenjs-0.5.1.min.js"></script> 
  <script type="text/javascript" src="package/canvasjs.min.js"></script>
  <script type="text/javascript"> 
    window.onload = function () {
      var chart = new CanvasJS.Chart("chartContainer", {            
        title:{
        text: "Running Challenge - 18/05 - 24/05"             
        },

          data: [{      
            type: "column",
            name: "Osman",
            dataPoints: [
              { label: "Osman", y: 220 },
              { label: "Osman", y: 440 },
              { label: "Osman", y: 660 },                                    
              { label: "Osman", y: 880 },
              { label: "Osman", y: 1100 },
              { label: "Osman", y: 1320 },
              { label: "Osman", y: 1540 }
            ]
          },{ 
            type: "column",
            name: "Simon",                
            dataPoints: [
              { label: "18/05", y: 190 },
              { label: "19/05", y: 405 },
              { label: "20/05", y: 610 },                                    
              { label: "21/05", y: 790 },
              { label: "22/05", y: 960 },
              { label: "23/05", y: 1100 },
              { label: "24/05", y: 1310 }
            ]}]
  });
    chart.render();
  }
  </script>
</head>

<body onload="init()" style="margin:0px">
  <canvas id="canvas" width="1347" height="900" style="border: black solid 1px"></canvas>

  <div id="menuContainer">
    <h5>.</h5> 
    <button onclick="location.href='Forsiden.html'"class="btn forsiden"> Forsiden </button>
    <h1>––––––––––</h1>
    <button onclick="location.href='Profil.html'" class="btn profil"> Profil </button>
    <h2>––––––––––</h2> 
    <button onclick="location.href='Challenge.html'"class="btn Challenges"> Challenges </button>
    <h3>––––––––––</h3>
    <button onclick="location.href='Information.html'" class="btn information"> Information </button>
    <h4>––––––––––</h4>
    <button class="btn voresApp"> VoresApp </button>
  </div>

<div id="chartContainer"></div>

</div>

</body>

</html>

你不能用onload方法调用两个函数?我假设它是createjs的东西,因为它加载了init函数,但它不会加载图形。如果我删除onload init,图表将加载。

javascript createjs
1个回答
0
投票

这与createJs无关。 window.onload和body.onload是使用相同事件的方法。在您的代码中,您将重新定义onload函数。在代码的早期,您为window onload定义了函数。 body onload属性会覆盖相同的事件处理程序。因此,只有后者才有效。如果你想让多个函数同时工作,你的主要onload函数应该全部调用它们。

例如,

window.onload = function(){
...
    initOne();
    initTwo();
...
}
© www.soinside.com 2019 - 2024. All rights reserved.