如何動態加載highcharts

Question

我正在嘗試動態加載高級圖表，如下面的代碼所示：它無法識別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>

Answer 1

$.getScript()是一個異步操作，這意味着它將獲取腳本，但在處理其余代碼之前不會等待它完成。 因此，您需要等待某些指示已檢索到代碼。 如果查看文檔，您會注意到$.getScript()只是為了這個目的而有一個成功的回調函數。 實際上，您的代碼中已經有一個空的成功函數，只需在那里移動Highcharts聲明即可。 換句話說，這樣做：

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

如何動態加載highcharts

問題描述

1 個解決方案

解決方案1
11 已采納 2012-02-02 07:12:25

如何動態加載highcharts

問題描述

1 個解決方案

解決方案1 11 已采納 2012-02-02 07:12:25

解決方案1
11 已采納 2012-02-02 07:12:25