Не удается загрузить мой график с помощью метода onload окна - PullRequest
Новая
       28

Не удается загрузить мой график с помощью метода onload окна

0 голосов
/ 29 апреля 2019

Я хочу выгрузить и мою 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, график загрузится.

1 Ответ

0 голосов
/ 29 апреля 2019

Это не имеет ничего общего с createJs. Window.onload и body.onload являются способами использования одного и того же события. В вашем коде вы переопределяете функцию onload. Ранее в коде вы определили функцию для загрузки окна. А атрибут onload тела переопределяет тот же обработчик событий. Следовательно, только позже будет работать. Если вы хотите, чтобы несколько функций работали одновременно, ваша основная функция загрузки должна вызывать их все.

например, 

window.onload = function(){
...
    initOne();
    initTwo();
...
}
...