文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用PHP array / JSON创建Google API折线图？

问如何使用PHP array / JSON创建Google API折线图？
EN

Stack Overflow用户

提问于 2012-06-22 23:39:12

回答 2查看 4.4K关注 0票数 1

我正在尝试使用他们的API创建一个简单的Google折线图。硬编码，这是可行的：

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

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales'],
      ['2010',  1000.31],
      ['2011',  1170.68],
      ['2012',  660]
    ]);

    var options = {

    };

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

</script>

但是，我正在尝试使用MySQL中的数据填充图表值。我怎么才能让它工作呢？

$arr = array('Year' => 'Sales', '2010' => 1000.31, '2011' => 1170.68, '2012' => 660);
$chart_data = json_encode($arr);

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

  function drawChart() {

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

    var options = {

    };

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

基本上，我是从MySQL结果创建一个PHP数组，并尝试在Google图表中显示它的内容。

php

arrays

json

api

google-visualization

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-06-28 02:30:13

你可以使用下面的链接代码及其在php和gd库中，与应用程序集成非常简单。http://www.kidslovepc.com/php-tutorial/php-dynamic-chart-plot.php。

票数 -3

Stack Overflow用户

发布于 2014-02-21 22:31:40

我知道这是一个古老的帖子，但对于其他找到它的人来说，我只是想把这篇文章贴出来，这是一个显而易见的答案：

https://developers.google.com/chart/interactive/docs/php_example

HTML：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

PHP：

<?php 

// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.

$string = file_get_contents("sampleData.json");
echo $string;

// Instead you can query your database and parse into JSON etc etc

?>

示例数据：

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

要使用数据库，您只需生成一个列数组和一个行数组，然后对它们执行json_encode操作，并通过PHP返回.json文件。

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11159501

复制

相似问题

问如何使用PHP array / JSON创建Google API折线图？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用PHP array / JSON创建Google API折线图？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用PHP array / JSON创建Google API折线图？
EN