无法在 div 中显示 Amcharts答案

【问题标题】：Cannot in display Amcharts in a div无法在 div 中显示 Amcharts
【发布时间】：2018-06-18 07:59:46
【问题描述】：

我在我的 html 中的特定 div 中绘制 Amcharts。问题是我通过 ajax 接收数据并尝试在该 div（主图表）中绘制它，但我成功接收数据但无法显示图表。我我很确定它与 div 的宽度和高度有关。但不确定如何识别它。

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>

右侧的 CSS 类

.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
                 },

                });

data 是从 ajax 接收到的数据。任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery ajax amcharts

【解决方案1】：

你需要做两件事：

首先，确保将绘制图表的元素没有共享或重复使用（因为缺少更好的词）不是特定于图表的 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>

然后你需要在 CSS 中为图表添加预期的尺寸：
```
#mainchart {
width: 100%;
height: 400px;}
```

【讨论】：