谷歌图表，PHP和Ajax

这是我的HTML：谷歌图表，PHP和Ajax

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(load_chart_data); 

function load_chart_data() { 
$.ajax({ 
    url: "serv.php", 
    type: "POST", 
    dataType: "JSON", 
    data: {get_chart: true}, 
    success: function(chart_values) { 
     draw_chart(chart_values); 
    } 
}); 
} 

function drawChart(chart_values) { 
    var data = google.visualization.arrayToDataTable(chart_values); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0} 
    }; 

    var chart = new  google.visualization.AreaChart(document.getElementById('chart2')); 
chart.draw(data, options); 
    } 

</script> 

<div id="chart2"></div>

，这是我serv.php

<?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); 
} 
?>

此代码必须创建一个谷歌图，但什么是错的。请帮忙。而有趣的注意，JSON工作，并从serv.php数组已加载

来源

2017-03-22 Oktu

尝试在PHP页面中添加页眉 '标题（ '内容类型：应用程序/ JSON'）;' –

@ user1978142你能看看这个？ – Oktu

我可以在哪里看？ –

-1

我不知道为什么，但这个代码工作（但它是一个线型图 - 不AreaChart）：

<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(load_chart_data); 

function load_chart_data() { 

    $.ajax({ 
     url: 'serv.php', 
     type: 'POST', 
     data: {get_chart: true}, 
     dataType: 'JSON', 
     success: function(chart_values) { 
     draw_chart(chart_values); 
     } 
    }); 
} 

function draw_chart(chart_values) { 
var data = google.visualization.arrayToDataTable(chart_values); 
var options = { 
    title: 'Company Performance', 
    vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}}, 
    hAxis: {title: 'Task', titleTextStyle: {italic: false}}, 
}; 
var chart = new google.visualization.LineChart(document.getElementById('chart2')); 
chart.draw(data, options); 
} 
</script>

来源

2017-03-23 08:09:02 Oktu

你响应在成功你叫draw_chart功能

success: function(chart_values) { 
    draw_chart(chart_values); 
}

你定义function drawChart(chart_values) {有一个差异。 drawChart和 :)

之间draw_chart您的图表是在这里：

来源

2017-03-23 08:47:12

谷歌图表，PHP和Ajax

回答

相关问题