如何在 HTML 页面中合并 amCharts

Question

我很难在我的自定义网页中部署 amCharts。下面是我的 HTML 页面，我试图在其中加入 amCharts，但是，无法成功。令人惊讶的是，当我在 Chrome 中打开 HTML 下面的文件时，我只看到一个空白页面。任何指向我所缺少的东西的指针都将不胜感激。

<html>
  <head>
    <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/lang/ru.js"></script>    
  </head>
  <body>
    <div id="chartdiv"></div>
    <style type="text/css">
        #chartdiv {
          width: 100%;
          height: 400px;
        }
</style>
    <script type="text/javascript">
           var chartData = [{
        "date": "2013-01-01",
        "value": 60
      }, {
        "date": "2013-01-02",
        "value": 67
      }, {
        "date": "2013-01-03",
        "value": 64
      }, {
        "date": "2013-01-04",
        "value": 66
      }];

      var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "light",
        "dataDateFormat": "YYYY-MM-DD",
        "valueAxes": [{
          "axisAlpha": 0,
          "position": "left"
        }],
        "graphs": [{
          "id": "g1",
          "bullet": "round",
          "bulletBorderAlpha": 1,
          "bulletColor": "#FFFFFF",
          "bulletSize": 5,
          "hideBulletsCount": 50,
          "lineThickness": 2,
          "title": "red line",
          "useLineColorForBulletBorder": true,
          "valueField": "value"
        }],
        "chartCursor": {
          "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
          "parseDates": true,
          "dashLength": 1,
          "minorGridEnabled": true,
          "position": "top"
        },
        "dataProvider": chartData
      });
    </script>
  </body>
</html>

Answer 1

有两个问题

1) 正如@Teemu 提到的，您想要将脚本标记放在 #chartdiv 之后，或者将 makeChart 调用包装在加载文档后执行的 onload 事件中。

2) AmCharts 要求您为 CSS 中的 #chartdiv 指定尺寸，例如

<style type="text/css">
#chartdiv {
  width: 100%;
  height: 400px;
}
</style>

如何在 HTML 页面中合并 amCharts

How to incorporate amCharts in HTML page

javascript

amcharts