个人中心
gpt4 book ai didi

php - MySqL 表每一行的谷歌图表

转载 作者：行者123 更新时间：2023-11-29 03:00:22 25 4
gpt4 key购买 nike

这里是新的 PHP 用户。我有一个看起来像这样的数据库:

 id    name    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    name    day1    day2    day3      day4       day5     chart
  1    nam1     5       9       15        50         45
  2    nam2     51      12      54        78         56
  3    nam3     12      145     78        49         58

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

    <?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 生成一个图表。第一个用户和其他用户将被忽略。你如何得到每一行的图表？感谢四位帮助。

最佳答案

最简单的方法需要稍微重新安排您的代码以使其工作:

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

但是，这不会产生非常好的折线图，因为您将有 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>

关于php - MySqL 表每一行的谷歌图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24642481/

25 4 0
文章推荐： php - 表字段值和外键 - LOAD DATA INFILE
文章推荐： java - 显示一次性弹出窗口(欢迎屏幕)
文章推荐： java - token "else,"上的语法错误删除此 token
文章推荐： mysql - 使用 Entity Framework 6 和 MySql 的 DbUpdateConcurrencyException
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com