Amcharts投入html

很奇怪的是，我上次运行程序一切正常，但这次它不工作，结果网页是空的，我真的不知道在哪里犯错误。只有加点的词语来谢谢谢谢谢谢）Amcharts投入html

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

来源

2016-09-26 user6703592

初始化你得到在浏览器控制台中的任何错误？代码看起来很好。你也可以在你的parseCSV行后面加上'console.log（data）'来查看你的CSV解析是否正确。 – martynasma

尝试了你的代码。完美的作品：http://codepen.io/team/amcharts/pen/d30bf8964f80003fd110798753678dd5 – martynasma

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

选项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 .... 
     */ 

    }); 
});

来源

2016-09-26 19:33:51 PierreDuc

如何在代码中解决？ – user6703592

缓存在这里不应该是个问题。 – martynasma

@martynasma缓存并不是他的问题的真正原因，但这就是为什么它没有发生在他的第一次。因为加载文件需要一段时间，所以当调用AmCharts.makeChart时，目标'div'已经存在。由于立即缓存文件加载，并且在目标div存在之前调用了“AmCharts.makeChart” – PierreDuc

Amcharts投入html

回答

相关问题