javascript - 谷歌图表、PHP 和 Ajax

Question

这是我的 HTML:

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

这段代码必须创建一个 Google 图表，但是出了点问题。请帮忙。有趣的是，json 有效并且 serv.php 中的数组已加载

Answer 1

您成功调用draw_chart函数的响应

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

你定义了function drawChart(chart_values) {有一个差异。在 drawChart 和 draw_chart 之间:)

您的图表在这里: