gpt4 book ai didi

javascript - 如何动态加载highcharts

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:05:30 35 4
gpt4 key购买 nike

我正在尝试动态加载 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>

最佳答案

$.getScript() 是一个异步操作,这意味着它会去获取脚本,但不会等它完成后再处理其余代码。因此,您需要等待某种表明已检索代码的指示。如果你看the docs您会注意到 $.getScript() 有一个成功回调函数就是为了这个目的。事实上,您的代码中已经有一个空的成功函数,只需将 Highcharts 声明移到那里即可。换句话说,这样做:

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

关于javascript - 如何动态加载highcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9108279/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com