Невозможно отобразить два элемента Javascript в Dreamweaver

-1

Я полный noob для интеграции с Javascript, и у меня проблема в Dreamweaver. У меня есть два графика Javascript, которые я хочу отобразить. Оба работают самостоятельно на странице, но я не могу заставить их отображаться вместе. Кажется, я помню, что подобный вопрос много лун назад со страницей, которая имела два Javascript элементов на нем, и им нужно было назвать в определенном порядке:Невозможно отобразить два элемента Javascript в Dreamweaver

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://www.scruffybearddesign.co.uk/scripts/Chart.js"></script> 
    </head> 

<body> 

    <div id="canvas-holder"> 
     <canvas id="chart-area" width="300" height="300"/> 
    </div> 


<script> 

    var pieData = [ 
      { 
       value: 300, 
       color:"#F7464A", 
       highlight: "#FF5A5E", 
       label: "Red" 
      }, 
      { 
       value: 50, 
       color: "#46BFBD", 
       highlight: "#5AD3D1", 
       label: "Green" 
      }, 
      { 
       value: 100, 
       color: "#FDB45C", 
       highlight: "#FFC870", 
       label: "Yellow" 
      }, 
      { 
       value: 40, 
       color: "#949FB1", 
       highlight: "#A8B3C5", 
       label: "Grey" 
      }, 
      { 
       value: 120, 
       color: "#4D5360", 
       highlight: "#616774", 
       label: "Dark Grey" 
      } 

     ]; 

     window.onload = function(){ 
      var ctx = document.getElementById("chart-area").getContext("2d"); 
      window.myPie = new Chart(ctx).Pie(pieData); 
     }; 



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


<script> 
var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 

var barChartData = { 
    labels : ["January","February","March","April","May","June","July"], 
    datasets : [ 
     { 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,0.8)", 
      highlightFill: "rgba(220,220,220,0.75)", 
      highlightStroke: "rgba(220,220,220,1)", 
      data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
     }, 
     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,0.8)", 
      highlightFill : "rgba(151,187,205,0.75)", 
      highlightStroke : "rgba(151,187,205,1)", 
      data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
     } 
    ] 

} 
window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
     responsive : true 
    }); 
} 

</script> 


</body>

Так по существу у меня есть два DIVs с Javascript кода, каждый DIV отлично работает на своем, но не будет работать вместе. Отобразится только второй график. Оба графика называют один и тот же .JS-файл, может ли это быть проблемой?

Любое понимание было бы с благодарностью принято.

источник

2015-12-01 user355218

onload Событие будет происходить только на одной странице. Вот почему вы видите только один, другой onload игнорируется.

Чтобы решить эту проблему, установите обе функции, чтобы сделать график, в том же onload случае

Чтобы решить эту проблему, используйте этот код:

window.addEventListener('load', function(){ 
    var ctx = document.getElementById("chart-area").getContext("2d"); 
    window.myPie = new Chart(ctx).Pie(pieData); 

    ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
     responsive : true 
    }); 
})

источник

2015-12-01 15:35:32 Pablo

Добавление к этому ответу, вы можете также связать множественный обратные вызовы к событию загрузки страницы с помощью 'window.addEventListener ('load', callback)' вместо 'window.onload' – juandemarco

Это имеет смысл. Он распознает только последнюю «загрузку», которую он получает. Как мне отредактировать этот существующий код для загрузки графиков из одного и того же «onload»? – user355218

Я отредактировал свой ответ с кодом – Pablo

Невозможно отобразить два элемента Javascript в Dreamweaver

ответ

Смежные вопросы