2016-06-28 121 views
0

在我的Yii网络应用程序中,谷歌图表不起作用。我通过renderpartial方法获取所有值。但是,饼图不显示。谷歌饼图不在yii

我的代码,

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

请帮助我。

回答

4

有在你的代码一些错误请尝试以下代码

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

+0

谢谢you.It的工作 – Arya