Javascript 无法在div中显示Amcharts

我在html中的一个特定分区中绘制Amcharts。问题是我通过ajax接收数据并尝试在该分区（mainchart）中绘制数据，但我成功地接收到数据，但无法显示图形。我非常确定这与分区的宽度和高度有关。但不确定如何识别它

HTML div是图形的主图表

<section class="intro">

    <row>
      <div id="map" class="col-md-6 col-sm-12 left">
      </div>
      <div id ="mainchart" class="col-md-6 col-sm-12 right">
        <p>Main Chart Area</p>
      </div>
    </row>
</section>

.right{
  display : flex;
  justify-content : center;
  align-items : center;
  background-image: url("htmlbackground.jpg");
  height : 100%;
  color : #3d231b;
}

JS绘制图形

var chart = AmCharts.makeChart("mainchart", {
                  "type": "stock",
                  "theme": "light",
                     "dataProvider": data,

                  "dataDateFormat": "YYYY-MM-DD",
                  "seriesField": "day",
                  "seriesValueFields": ["a", "c"],
                  "seriesGraphTemplate": {
                    "lineThickness": 2,
                    "type": "smoothedLine",
                    "useDataSetColors": false,
                    "bullet": "round"
                  },

                  "categoryAxesSettings": {
                    "minPeriod": "mm"
                  },

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

                  "panels": [{

                      "valueAxes": [ {
                        "title":"Values"
                        }],
                      "listeners": [{
                           "event": "drawn",
                           "method": function(e)                               

                           }
                         }

                      ],
                        "titles": [{
                              "id": "Title-1",
                              "size": 15,
                              "text": "Analysis"
                            }],

                        "stockLegend": {}
                  }],
                  "panelsSettings": {
                   "marginLeft": 50
                   },


                    "chartCursorSettings": {
                    "valueBalloonsEnabled": true
                  },

                "responsive": {
                "enabled": true
                 },

                });

数据是从ajax接收的数据。

---

感谢您的帮助。

您需要做两件事：

• 首先，确保绘制图表的元素没有共享或重用（因为缺少更好的词语）不是图表特有的CSS类

这意味着您需要将

#mainchart

div移动到列中：

<row>
  <div id="map" class="col-md-6 col-sm-12 left">
  </div>
  <div class="col-md-6 col-sm-12 right">
    <div id ="mainchart">
      <p>Main Chart Area</p>
    </div>
  </div>
</row>

#mainchart {
width: 100%;
height: 400px;}