javascript - Amcharts 未使用 javascript 函数进行渲染

Question

我正在尝试通过 JavaScript 函数调用使用 Amcharts 渲染饼图。我的代码如下 -

Html 文件 -

   <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
   <script src="https://www.amcharts.com/lib/3/pie.js"></script>              

    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div id="pie1">
                                      <script>
                                       createChart([{"country":"Czech","litres":301.9},{"country":"Ireland","litres":201.1},{"country":"Germany","litres":165.8},{"country":"Pak","litres":139.9},{"country":"Austria","litres":128.3},{"country":"UK","litres":99}]) ;
) ;
                                       </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Amcharts js 文件 -

function createChart(chartData){
    var chart = AmCharts.makeChart("pie1", {
    "type": "pie",
    "theme": "light",
    "dataProvider": chartData,
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "fixedPosition": true
    },
    "export": {
        "enabled": true
    }
});

}

使用函数 createChart()，我传递一个 json，用于在函数定义中用于填充饼图。我调试以检查控制是否转到 js 文件，确实如此，但饼图仍然没有渲染。有人可以告诉我这个实现有什么问题吗？

Answer 1

您可能需要添加定义尺寸的样式:

<style>
#pie1 {
  width: 100%;
  height: 500px;
}
</style>

我还建议将 script 标记放在 DivElement 之外。也许就在 body 标记结束之前。