如何动态加载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>
I am trying to load highcharts dynamically as shown in below code: It is not able to recognize highcharts variable. If I load highcharts by static means, it works. Please help.
I am using jquery version 4 and highcharts latest version 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
$.getScript()是一个异步操作，这意味着它将获取脚本，但不会等待脚本完成后再处理其余代码。因此，您需要等待代码已被检索的某种指示。如果您查看文档，您会发现$.getScript()已成功回调函数就是为了这个目的。事实上，您的代码中已经有一个空的 success 函数，只需将 Highcharts 声明移到那里即可。换句话说，执行以下操作：$.getScript()is an asynchronous operation, meaning it will go fetch the script but won't wait for it to be done before processing the rest of the code. Therefore you need to wait for some sort of indication that the code has been retrieved. If you look at the docs you will notice that$.getScript()has a success callback function just for this purpose. In fact, you already have an empty success function in your code, just move the Highcharts declaration there. In other words, do this: