Google Charts，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 Chart，但是出了點問題。 請幫忙。 有趣的是，json工作正常，serv.php中的數組已加載

Answer 1

您成功調用了draw_chart函數

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

然后您定義了function drawChart(chart_values) {有一個差異。 在drawChart和draw_chart之間：)

您的圖表在這里：

Answer 2

我不知道為什么，但是這段代碼有效（但是它是LineChart-不是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>