Amcharts nicht mit JavaScript-Funktion gerendert

Question

Ich versuche, ein Tortendiagramm mit Amcharts durch eine Javascript-Funktionsaufruf zu rendern. Mein Code ist wie folgt -

Html Datei -

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

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

} 

die Funktion Create() verwenden, ich vorbei eine json verwendet werden in der Funktionsdefinition zum Auffüllen des Tortendiagramms. Ich debuggte, um zu überprüfen, ob die Kontrolle in die js-Datei geht, aber das Tortendiagramm wird nicht gerendert. Kann mir jemand sagen, was mit dieser Implementierung nicht stimmt?

Answer 1

Möglicherweise müssen Sie den Stil definieren die Dimensionen hinzuzufügen:

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

Ich empfehle auch aus dem DivElement das Script-Tag zu haben. Vielleicht kurz vor dem Ende des Body-Tags.