Amcharts 放入 html

Question

很奇怪，上次我运行程序一切正常，这次就不行了，结果网页一片空白，真不知道哪里出错了。（抱歉只加几句谢谢谢谢谢谢谢谢）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">

<style>
    #chartdiv
    {
        width       : 100%;
        height      : 500px;
        font-size   : 11px;
    }
</style>

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

<script type="text/javascript">

AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {

        /**
         * Parse CSV
         */
        var data = AmCharts.parseCSV(response, {
            "useColumnNames": true
        });

        /**
         * Create the chart
         */
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "light",
            "dataProvider": data,
            "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,
                "tickPosition": "start",
                "tickLength": 20
            }
        });

    });

</script>
</head>

<body>

<div id="chartdiv"></div>

</body>

</html>

Answer 1

CSV 文件现在可能缓存在您的浏览器中，这导致 Amcharts 立即创建图表。不幸的是 div 容器还不存在。将您的图表初始化脚本标记移动到图表下方 div 或将其包装在 DOMContentLoaded 事件监听器中或将脚本移动到单独的文件中。

选项 1 将脚本标签移动到目标下方 div

<body>
    <div id="chartdiv"></div>
    <script type="text/javascript">
       AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {

           /**
            * Parse CSV  ....
           */

       });  
   </script>
</body>

选项 2 环绕初始化 DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
   AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) {

       /**
        * Parse CSV  ....
       */

   });  
});

Amcharts 放入 html

Amcharts put into html

amcharts