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

回答

相关问题