1

我正在尝试使用他们的 API 创建一个简单的谷歌折线图。硬编码，这有效：

<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 图表中显示其内容。

4

2 回答 2

-2

我知道这是一篇旧帖子，但对于找到它的其他人，我只想发布这个，这是显而易见的答案：

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 文件。

于 2014-02-21T14:31:40.437 回答
-3

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

于 2012-06-27T18:30:12.753 回答