如何填充谷歌图表API动态 [英] How to populate Google chart API dynamically

问题描述

我试图使用他们的API和JSON创建一个谷歌折线图。

I am trying to create a Google line chart using their API and JSON.

硬codeD，这张图如下：

Hard coded, this chart works:

<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来填充它，我不能得到这个工作：

However, trying to populate it using JSON, I can not get this to work:

<?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：//开头开发商.google.com /图表/互动/文档/ php_example

不过，我无法找到如何设置像这样一个简单的折线图JSON数据的例子。

However, I could not find any examples for how to setup the JSON data with a simple line chart like this.

推荐答案

您正在接近。

$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]]

看到它在行动。

这篇关于如何填充谷歌图表API动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！