php - 如何动态填充 Google 图表 API

Question

我正在尝试使用他们的 API 和 JSON 创建 Google 折线图。

硬编码，此图表有效:

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

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Date', 'Sales'],
      ['Jun 25',  12.25],
      ['Jun 26',  8.00],
      ['Jun 27',  20.50]
      ['Jun 28',  12.75]
    ]);

    var options = {

    };

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

</script>

但是，尝试使用 JSON 填充它时，我无法让它工作:

<?php

$data = array();
$data["Date"] = "Sales";
$data["Jun 25"] = "12.25";
$data["Jun 26"] = "8.00";
$data["Jun 27"] = "20.50";
$data["Jun 28"] = "12.75";
$data = json_encode($data);

?>

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

  function drawChart() {

    var data = google.visualization.arrayToDataTable(<?php echo $data; ?>);

    var options = {

    };

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

</script>

我显然没有正确编码数组。谷歌有一个关于如何用 JSON 数据填充图表的示例页面:https://developers.google.com/chart/interactive/docs/php_example

但是，我找不到任何示例来说明如何使用像这样的简单折线图设置 JSON 数据。

Answer 1

你很接近。

$data = array( 
             array('Date', 'Sales'),  
             array('June 25', 12.25),  
             array('June 26', 8.00) 
);

json_encode($data);

输出

[["Date","Sales"],["June 25",12.25],["June 26",8]]

See it in action.