Question

我正在尝试创建line chart我的项目，我已经通过将值放在代码中但现在尝试从phpmyadmin获取数据来制作一个简单的线图。

我认为错误在于对json的侵蚀。

html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Time',  'PH', 'Chlorine'],
          ['8',      7,     6.5],
          ['9',      7.2,   4.3],
          ['10',     7.5,   3.2],
          ['11',     8.5,   2.4]
        ]);

        var options = {
          title: 'Measurement'


        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

输出如下：

enter image description here

我遵循了这个指南：PHP MySQL Google Chart JSON - Complete Example但是它制作了一个饼图，我试图用三个变量制作折线图：时间，PH和氯。

这是我走了多远，仍然没有工作：

<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("chart", $con);

$sth = mysql_query("SELECT * FROM googlechart");

$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(


    array('label' => 'Time',    'type' => 'number'),
    array('label' => 'PH',      'type' => 'number'),
    array('label' => 'Chlorine','type' => 'number') );

    $rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();

    $temp[] = array('v' => (string) $r['Time']); 
    $temp[] = array('v' => (string) $r['PH']);
    $temp[] = array('v' => (string) $r['Chlorine']);    


    $temp[] = array('v' => (int) $r['Time']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;




?>


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.DataTable(<?=$jsonTable?>);

        var options = {
          title: 'Measurement'


        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

希望有人可以告诉我我做错了什么，并帮助我。谢谢！

Answer 1

您需要将该数据放入DataTable中。有两种主要方法可以做到这一点。首先，您可以将PHP代码包含在带有图表的文件中，并将$jsonTable直接回显到DataTable构造函数中：

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

或者，您可以将PHP代码放入其自己的页面（并取消注释echo $jsonTable行），并使用AJAX请求来获取数据。以下是使用jQuery处理AJAX请求的示例：

function drawChart() {
    $.ajax({
        url: 'path/to/data/source.php',
        type: 'json',
        success: function (json) {
            var data = new google.visualization.DataTable(json);

            var options = {
                title: 'Measurement'
            };

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

Answer 2

您的功能图表绘图必须如下所示：

var data = null;
        data = new google.visualization.DataTable();

        data.addColumn('number', 'NameAxis');
        data.addColumn('number', 'NameAxis');
        var total = [];
        for (var i = res.length - 1; i >= 0; i--) {
            total.push([time[i] ,valuePH[i] , valueCl[i] ]);
        }
        data.addRows(total);

        var options = {
            hAxis: {
                title: 'NameHAxis',
            vAxis: {
                title: 'NamevAxis'
                },
                backgroundColor: '#ffffff', //fondo de la grafica
                width: 700,
                height: 400,
                title: 'Measurement',

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

来自phpmyadmin数据库的Google图表

2 个答案: