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 file -

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>

我还建议让脚本标记在DivElement之外。也许就在身体标签结束之前。

Amcharts没有使用javascript函数进行渲染

1 个答案: