Google饼图在yii中不起作用

Question

在我的Yii网络应用程序中，Google图表无法正常工作。我正在通过renderpartial方法获取所有值。但是，不显示饼图。

我的代码是

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

请帮我。

Answer 1

您的代码中有一些错误，请尝试以下代码

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

查看这个小提琴：https : //jsfiddle.net/xoevL26z/