MySql表每一行的谷歌图表答案

【问题标题】：Google chart for each row of MySqL tableMySql表每一行的谷歌图表
【发布时间】：2014-08-29 19:37:41
【问题描述】：

这里是新的 PHP 用户。我有一个如下所示的数据库：

 id 名称 day1 day2 day3 day4 day5

  1    nam1     5       9       15        50         45
  2    nam2     51      12      54        78         56
  3    nam3     12      145     78        49         58

数据库包含成千上万的用户。表中的每个数字代表每个用户的日常活动量。我们需要一个看起来像这样的表

 id 名称 day1 day2 day3 day4 day5 图表

  1    nam1     5       9       15        50         45
  2    nam2     51      12      54        78         56
  3    nam3     12      145     78        49         58

我们想在最后一列为每个用户绘制一个谷歌折线图。这是生成图表的代码：

    <?php

    $result = mysqli_query($c,"SELECT * from users limit 100");

    $row = mysqli_fetch_array($result); 

    $d1=$row['day1']; $d2=$row['day2']; $d3=$row['day3']; $d4=$row['day4']; $d5=$row['day5']; 

    //// that's the data that get loaded into Google Charts(no axis label) ////

    $data="[['','day'],['',".$d1."],['', ".$d2."],['', ".$d3. "],['', ".$d4."],['', ".$d5. "]]";   
     ?>
    <html>
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <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 = {
                      title: 'User Activities',
                          curveType: 'function',
                          width:200,
                          height:150,
                          legend: 'none'

                    };

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                  }
                </script> 
               </head>
            <body>
            <?php echo "<table border='1'>
            <tr>
            <th>id</th>
            <th>name</th>
            <th>charts</th>
            </tr>";

            while($row = mysqli_fetch_array($result)) {

              echo "<tr>";
               echo "<td>" . $row['id'] . "</td>";
                echo "<td>" . $row['name'] . "</td>";
                  echo "<td> 
                <div id=\"chart_div\" style=\"width:200; height:150\"></div></td>";

              echo "</tr>";
            }
            echo "</table>"; ?>
            </body>
            </html>

此代码只为用户 id=2 生成一个图表。第一个用户和其他用户被忽略。你如何得到每行的图表？感谢四位帮助。

【问题讨论】：

不要构建自己的 json 字符串。这太容易搞砸了。使用json_encode() 并跳过整个“获取变量然后将变量填充到字符串”练习。

标签： php mysql json charts google-visualization

【解决方案1】：

最简单的方法需要重新安排代码以使其正常工作：

<html>
    <head>
    </head>
    <body>
        <table border='1'>
            <tr><th>id</th><th>name</th><th>charts</th></tr>
<?php
$result = mysqli_query($c,"SELECT * from users limit 100");
$data = array(array('', 'Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'));
$i = 0;
while($row = mysqli_fetch_array($result)) {
    echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td><div id='chart_div_{$i}' style='width:200; height:150'></div></td></tr>";
    $data[] = array('', $row['day1'], $row['day2'], $row['day3'], $row['day4'], $row['day5']);
    $i++;
}
?>
        </table>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);
            var options = {
                title: 'User Activities',
                curveType: 'function',
                width: 200,
                height: 150,
                legend: 'none'
            };

            var charts = [];
            var views = [];
            for (var i = 0; i < data.getNumberOfRows(); i++) {
                views.push(new google.visualization.DataView(data));
                views[i].setRows([i]);
                charts.push(new google.visualization.LineChart(document.querySelector('#chart_div_' + i)));
                charts[i].draw(views[i], options);
            }
        }
        </script>
    </body>
</html>

但是，这不会产生非常好的 LineCharts，因为您将有 5 条线，每条线 1 点。如果您正在寻找跨越 5 天的单行，那么这就是您想要的设置方式：

<html>
    <head>
    </head>
    <body>
        <table border='1'>
            <tr><th>id</th><th>name</th><th>charts</th></tr>
<?php
$result = mysqli_query($c,"SELECT * from users limit 100");
$data = array(
    array('Day'),
    array('Day 1'),
    array('Day 2'),
    array('Day 3'),
    array('Day 4'),
    array('Day 5')
);
$i = 0;
while($row = mysqli_fetch_array($result)) {
    echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td><div id='chart_div_{$i}' style='width:200; height:150'></div></td></tr>";
    $data[0][] = "Daily activities for {$row['name']}";
    $data[1][] = $row['day1'];
    $data[2][] = $row['day2'];
    $data[3][] = $row['day3'];
    $data[4][] = $row['day4'];
    $data[5][] = $row['day5'];
    $i++;
}
?>
        </table>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>);
            var options = {
                title: 'User Activities',
                curveType: 'function',
                width: 200,
                height: 150,
                legend: 'none'
            };

            var charts = [];
            var views = [];
            for (var i = 0; i < data.getNumberOfColumns() - 1; i++) {
                views.push(new google.visualization.DataView(data));
                views[i].setColumns([0, i + 1]);
                charts.push(new google.visualization.LineChart(document.querySelector('#chart_div_' + i)));
                charts[i].draw(views[i], options);
            }
        }
        </script>
    </body>
</html>

【讨论】：

非常感谢。完美运行！