Question

我正在我的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
                 },

                });

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

Answer 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;}
```

无法在div中显示Amcharts

1 个答案: