2012-02-02 4 views
3

Я пытаюсь загрузить динамические диаграммы динамически, как показано ниже: Невозможно распознать переменную highcharts. Если я загружаю highcharts статическими средствами, он работает. Пожалуйста помоги.Как динамически загружать highcharts

Я использую JQuery версии 4 и Highcharts последнюю версию 1,0

<html> 
<head> 
//loading jquery 
<script src="js/libs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var chart1; 

$(document).ready(function() { 
$.getScript('js/libs/highcharts.src.js', function() { 

      }); 


    chart1 = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart1', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Fruit Consumption' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Bananas', 'Oranges'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Fruit eaten' 
      } 
     }, 
     series: [{ 
      name: 'Jane', 
      data: [1, 0, 4] 
     }, { 
      name: 'John', 
      data: [5, 7, 3] 
     }] 
     }); 
    }); 


</script> 


</head> 

<body> 
<div id="chart1"></div> 

</div> 
</body> 
</html> 
+0

Есть ли причина, по которой вы используете jquery 1.4.2? – Rumplin

ответ

11

$.getScript() является асинхронной операцией, то есть он будет сходить за сценарий, но не будет ждать, чтобы это было сделано до обработки остальной код. Поэтому вам нужно дождаться какого-то указания на то, что код был восстановлен. Если вы посмотрите на the docs, вы заметите, что $.getScript() имеет функцию обратного вызова с успехом только для этой цели. Фактически, у вас уже есть пустая функция успеха в вашем коде, просто переместите там объявление Highcharts. Другими словами, сделайте следующее:

$(document).ready(function() { 
    $.getScript('js/libs/highcharts.src.js', function() { 
     chart1 = new Highcharts.Chart({ 
      // Highcharts options 
     }); 
    }); 
}); 
+0

Спасибо за быстрый ответ и приятное объяснение :) –

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