Ajax和谷歌圖表。通過PHP

exampleUsingPHP.htmlAjax和谷歌圖表。通過PHP

<html> 
<head> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 

var jsonData = $.ajax({ 
url: "getData.php", 
//dataType:"java", 
async: false 
//success: function(results) {alert(results);} 
}).responseText; 


// 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(drawChart); 

function drawChart() { 
alert(jsonData); 
// Create our data table out of JSON data loaded from server. 
var data = google.visualization.arrayToDataTable(jsonData); 

// Instantiate and draw our chart, passing in some options. 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data, {width: 400, height: 240}); 
} 

</script> 
</head> 

<body> 
<!--Div that will hold the pie chart--> 
<div id="chart_div"></div> 
</body> 

<script> 
</script> 
</html>

訪問getdata.php

<?php 
    echo "[['Task', 'Hours per Day'], 
    ['Work',  11], 
    ['Eat',  2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', 7] 
    ]"; 
    ?>

所以我的問題是該行...

var data = google.visualization.arrayToDataTable(jsonData);

當我嘗試jsonData通入arrayToDataTable（），它不喜歡它是一個字符串。我能做些什麼來將字符串「jsonData」轉換爲可用於arrayToDataTable（）函數的有效javascript？

來源

2014-07-14 koolaid_Mixin_Jones

或者，你可以只使用功能json_encode()獲得無壓力結果。創建一個你的值的數組（當然建立像它適合谷歌圖表所需的那個），然後使用該函數。 Sample Demo

PHP（訪問getdata.php）

if(isset($_POST['get_chart'])) { 
    $values = array(
     array('Task', 'Hours Per Day'), 
     array('Work', 11), 
     array('Eat', 2), 
     array('Commute', 2), 
     array('Watch TV', 2), 
     array('Sleep', 7), 
    ); 

    echo json_encode($values); 
    exit; 
}

HTML/jQuery的

<div id="chart_div" style="width: 900px; height: 500px;"></div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(load_chart_data); 

function load_chart_data() { 
    $.ajax({ 
     url: 'getData.php', // provide correct url 
     type: 'POST', 
     data: {get_chart: true}, 
     dataType: 'JSON', // <-- since youre expecting JSON 
     success: function(chart_values) { 
      console.log(chart_values); // take a peek on the values (browser console) 
      draw_chart(chart_values); // call your drawing function! 
     } 
    }); 
} 

function draw_chart(chart_values) { 
    var data = google.visualization.arrayToDataTable(chart_values); 
    var options = { 
     title: 'Your super chart!', 
     vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}}, 
     hAxis: {title: 'Task', titleTextStyle: {italic: false}}, 
    }; 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

</script>

來源

2014-07-14 04:47:01 user1978142

非常感謝你我的朋友。你解決了我的噩夢。 –

@JamesPiekarz肯定沒有問題 – user1978142

首先你必須創建一個有效的json。現在，如果您將返回的字符串粘貼到jsonlint，您可以看到它是無效的json。

要檢查JSON對象的validtity，您可以使用jsonlint

從PHP代碼中創建JSON - http://php.net/manual/en/function.json-encode.php

如有效的JSON字符串：

{ 
    "Work": 11, 
    "Eat": 2 
} 

var myJSONString = // your JSON string 
var jsobj= JSON.parse(myJSONString);

來源

2014-07-14 04:39:18 spiderman

Ajax和谷歌圖表。通過PHP

回答

相關問題