无法呈现图形

Question

我正在使用Amcharts和Jquery在CSS的特定网格中绘制图形。

所以我的网格如下：

<!-- Main Grid Component-->
<div class="grid-container">

    <!-- Map Grid Component-->
    <div id="map" class="map"></div>
    <script src="js/main-graph.js" > </script>
    <!-- Main Graph Component-->
    <div class="main-chart">mainchart</div>  

    <!-- Sub Graph Component-->
    <div class="sub-chart">subchart</div>

</div>

我的CSS就像

.map {
  grid-column-start: 1;
  grid-column-end:   2;
  grid-row-start: 1;
  grid-row-end:   3;
  font-size: 30px;
  text-align: center;
}
.main-chart {
  grid-column-start: 2;
  grid-column-end:   4;
  grid-row-start: 1;
  grid-row-end:   3;
  font-size: 30px;
  text-align: center;
  color: white;
}
.sub-chart {
  grid-column-start: 1;
  grid-column-end:   4;
  background-color:#21BED3 ;
  font-size: 30px;
  text-align: center;
}

main-graph.js 包含方法

$.ajax({ 
    url:"http:localhost:8080/data/",
        contentType : "application/json; charset=utf-8",
        headers : createAuthorizationTokenHeader(),
        type: "GET",
        dataformat:"JSON",
        async : false,
        success: function(data){
            var img_load=$('#img-load');
             $(img_load).show();
           var chart = AmCharts.makeChart("main-chart", {
             "type": "stock",
             "dataProvider": data,
             "theme": "light",
             "dataDateFormat": "YYYY-MM-DD",
             "seriesField": "day",
             "seriesValueFields": ["value1", "value3"],
             "seriesGraphTemplate": {
               "lineThickness": 2,
               "type": "smoothedLine",
               "useDataSetColors": false,
               "bullet": "round"
             },

             "titles": [
             {
               "text": "Charts",
               "size": 15
             }
           ],
             "categoryAxesSettings": {
               "minPeriod": "mm"
             },

             "dataSets": [{
               "dataProvider": data,
               "categoryField": "time"
             }],

             "panels": [{
               "valueAxes": [ {
                   "title":"Value"
                   }],
                   "titles": [{
                         "id": "Title-1",
                         "size": 15,
                         "text": "Title"
                       }],

                   "stockLegend": {}
             }],
             "panelsSettings": {
              "marginLeft": 50
              },
             "titles": [
             {
               "id": "Title-1",
               "size": 15,
               "text": " Value"
             }
           ],
           "valueAxes": [
           {

             "title": "Value Axis"
           }
         ],
          "listeners": [{
               "event": "drawn",
               "method": function(e) {
                   loader();
               }
             }
          ],
             "chartCursorSettings": {
               "valueBalloonsEnabled": true
             }
           });
          },
        error:function(){
        }  
    });

但是我得到了错误

  

未捕获的TypeError：无法读取未定义的属性'Class'

     

未捕获的TypeError：无法将属性'innerHTML'设置为null

因此，当我查看错误时，我认为该错误与div和脚本的位置有关，所以我尝试了

<!-- Main Grid Component-->
<div class="grid-container">

    <!-- Map Grid Component-->
    <div id="map" class="map"></div>
    <!-- Main Graph Component-->
    <div class="main-chart">mainchart</div>  

    <!-- Sub Graph Component-->
    <div class="sub-chart">subchart</div> 

</div>
<script src="js/main-graph.js" > </script>

但这仍然给出了相同的错误。感谢您的帮助。