javascript Amcharts 在 js 文件中未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22412168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Amcharts undefined in js file
提问by user2157179
I am trying to create an amchart chart in a javascript file. However whenever I try and create the chart in my console I get this error `ReferenceError: AmCharts is not defined. When I try to create the same chart but this time inside of the HTML file in a script tag the chart works fine. Heres the js file code:
我正在尝试在 javascript 文件中创建一个 amchart 图表。但是，每当我尝试在控制台中创建图表时，都会收到此错误 `ReferenceError: AmCharts is not defined。当我尝试创建相同的图表但这次在脚本标记的 HTML 文件中时，图表工作正常。下面是js文件代码：
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
And in my html theres a simple divtag.
在我的 html 中有一个简单的div标签。
<div id="chartDiv"></div>
Heres the html file that does work:
这是有效的 html 文件：
<html>
<body>
<div id="chartdiv" style="width: 640px; height: 400px;"></div>
<script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
},
"exportConfig":{
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
</script>
</body>
</html>
The script definitions are exactly the same for both files. Is there a special includeor something required in the js file? Because jqueryworks fine for me.
两个文件的脚本定义完全相同。includejs文件中是否有特殊或需要的东西？因为jquery对我来说效果很好。
Can someone explain how I can call the amcharts from my js file?
有人可以解释我如何从我的 js 文件中调用 amcharts 吗？
Thanks
谢谢
回答by Novaugust
When you put the code in a separate file, are you making sure to put its script tag underneath the amcharts script tags?
当您将代码放在单独的文件中时，您是否确保将其脚本标签放在 amcharts 脚本标签下？
The order in which your tags appear in your html matters - if you try to run your script before the amcharts script (by placing its tag above the amcharts tag), the browser won't have loaded amcharts yet and so will throw a reference error.
您的标签在您的 html 中出现的顺序很重要 - 如果您尝试在 amcharts 脚本之前运行您的脚本（通过将其标签放在 amcharts 标签上方），浏览器还没有加载 amcharts，因此会引发参考错误.
Your html should look like this, assuming you name your script:
假设您为脚本命名，您的 html 应如下所示：
<script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="js/myScript.js" type="text/javascript"></script>
Whereas, if you had things in this order, it would notwork - you would get a reference error.
然而，如果在此订购了的东西，它会不工作-你会得到一个引用错误。
<script src="js/myScript.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="js/amcharts/amcharts/serial.js" type="text/javascript"></script>
