如何在HTML页面中合并amCharts

Question

I am struggling to deploy amCharts in my custom webpage. 我正在努力在自己的自定义网页中部署amCharts 。 Below is my HTML page where I tried to incorporate a amCharts , however, couldn't not succeed. 以下是我尝试合并amCharts HTML页面，但是无法成功。 Surprisingly, when I open below HTML file in Chrome, I just see a blank page. 令人惊讶的是，当我在Chrome中的HTML文件下方打开时，我只看到一个空白页。 Any pointer to what I am missing would be highly appreciated. 任何指向我所缺少的东西的指针将不胜感激。

<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

There are two issues 有两个问题

1) As @Teemu mentioned, you want to either put the script tag after the #chartdiv or wrap the makeChart call in an onload event that executes after the document is loaded. 1）正如@Teemu所提到的，您想将脚本标记放在#chartdiv之后，或将makeChart调用包装到在加载文档后执行的onload事件中。

2) AmCharts requires that you specify dimensions for the #chartdiv in CSS, eg 2）AmCharts要求您在CSS中为#chartdiv指定尺寸，例如

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

如何在HTML页面中合并amCharts

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-04-02 16:30:35

如何在HTML页面中合并amCharts

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-04-02 16:30:35

解决方案1
1 已采纳 2018-04-02 16:30:35