问Amcharts在js文件中未定义
EN

Stack Overflow用户

提问于 2014-03-14 17:43:26

回答 1查看 13.6K关注 0票数 2

我正在尝试在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'     
      }]  
    }
});

在我的html中有一个简单的div标签。

 <div id="chartDiv"></div>

下面是可以工作的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>

两个文件的脚本定义完全相同。js文件中是否需要特殊的include或其他内容？因为jquery对我来说工作得很好。

谁能解释一下如何从我的js文件中调用amcharts？

谢谢

javascript

html

amcharts

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-14 18:00:34

当您将代码放在单独的文件中时，是否确保将其脚本标记放在amcharts脚本标记的下面？

标签在html中出现的顺序很重要如果你试图在amcharts脚本之前运行你的脚本(通过把它的标签放在amcharts标签之上)，浏览器还没有加载amcharts，因此会抛出一个引用错误。

假设你给你的脚本命名，你的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>

然而，如果你有这个顺序的东西，它就不会工作了--你会得到一个引用错误。

<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>