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

1 个答案: