Google-Kreisdiagramm funktioniert nicht in yii

Question

In meiner Yii-Webanwendung funktioniert das Google-Diagramm nicht. Ich bekomme alle Werte mit renderpartial Methode. Das Tortendiagramm wird jedoch nicht angezeigt.

Mein Code ist,

<div class="content"> 
<div id="graph" style="width:300px;height:300px "> 
</div> 
</div> 
<script type="text/javascript" src="https://www.google.com/jsapi"> 
    // Load the Visualization API and the piechart package. 
google.load("visualization", "1", { packages: ["corechart"] }); 
    // Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(createPIE); 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
function createPIE() { 

    var options = { 
     title: 'Fees Allocation', 
     colors: ['#888', 'orange','red'], 
     is3D: true 
    }; 
    // Create our data table. 
var data = google.visualization.arrayToDataTable([ 

['Total Amount', <?php echo $amount;?>], 
['Collected', <?php echo $collected;?>], 
['Due', <?php echo $due;?>]]); 
var chart = new  google.visualization.PieChart(document.getElementById('graph')); 
      chart.draw(data, options); 

} 

</script> 

Bitte helfen Sie mir.

Answer 1

Es gibt einige Fehler in Ihrem Code versuchen Sie bitte das folgende Code

<?php 
$amount = 20; 
$collected = 50; 
$due = 30; 
?> 

<div class="content"> 
<div id="graph" style="width:300px;height:300px"> 
</div> 
</div> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    // Load the Visualization API and the piechart package. 
google.charts.load("current", { packages: ["corechart"] }); 
    // Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(createPIE); 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
function createPIE() { 

    var options = { 
     title: 'Fees Allocation', 
     colors: ['#888', 'orange','red'], 
     is3D: true 
    }; 
    // Create our data table. 
var data = google.visualization.arrayToDataTable([ 
['status', 'Amount'], 
['Total Amount', <?php echo $amount;?>], 
['Collected', <?php echo $collected;?>], 
['Due', <?php echo $due;?>]]); 
var chart = new  google.visualization.PieChart(document.getElementById('graph')); 
chart.draw(data, options); 

} 
</script> 

Kasse diese Geige: https://jsfiddle.net/xoevL26z/