动态图代码点火器

问题描述 投票：0回答：1

我有一个表（名称为recuperare_laborator），其中包含以下列：subject_id; uploader_id;班级号;和时间戳。我想每天统计所有表中的所有文件，因此我编写以下代码：

$query = $this->db->query('SELECT subject_id ,uploader_id, class_id, COUNT(*) FROM recuperare_laborator  GROUP BY class_id');
                     foreach ($query->result_array() as $row)
                            {
                                echo "<tr>";
                                echo "<td>" . $row['class_id'] . "</td>";
                                echo "<td>" . $row['COUNT(*)'] . "</td>";
                                echo "</tr>";
                              }

并且此代码仅适用于每个类的计数器。我如何计算一天中的所有项目？我需要看：

    Day 1 100 count
    Day 2 101 count
...

并且，根据这些信息，我想制作一个动态图表。我尝试制作，但是我不知道如何实现代码。

    <script>
var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: ['1','2'], //here i need day 1,day 2...
      datasets: [{
          data: [  '10','20'], // here i need count from day 1, count from day 2
          backgroundColor: [
              'rgba(67, 148, 255, 0.2)',

          ],
          borderColor: [
            'rgba(67, 148, 255, 1)',

          ],
          borderWidth: 1
      }]
  },
});
</script>

结果必须是：image chart

picture with line count

php codeigniter chart.js
1个回答
0
投票

@ myEDU，

您需要按DATE(timestamp)分组来更改查询>

这里是您要的SQL Fiddle

。

我在单个控制器中添加了与PHP的动态集成，包括视图，数据操作以及数据库调用，Codigniter遵循MVC模式，您需要将其拆分为MVC模式。

折线图也希望在数组和标签中包含一个月的数据，我们通过数组$datasetarr和$datasetlbl分别。

动态集成

public function index() 
{ 

  ?>
  <!DOCTYPE html>
  <html>
  <head>
        <title>Chart</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  </head>
  <body> 
      <div class="container">

        <div class="row">
          <div class="col-md-12">

              <?php
              $datasetarr = array(null);
              $datasetlbl = array(0);

              $month = date("m");
              $mname = date("F");

              $start = $end = strtotime(date("Y-m-01"));

              $this->load->database();
              $query = $this->db->query('SELECT COUNT(id) AS cnt, DATE(`timestamp`) AS dt FROM `recuperare_laborator` AS t1 GROUP BY dt HAVING MONTH(dt) = "'.$month.'" ORDER BY dt ASC');
              $res = $query->result_array();

              if($res){
                $count_dt = array_column($res, 'dt');
                $count_array = array_column($res, 'cnt');
                $maxdt = max($count_dt);

                //need to pass month no in which we need.For eg: 05. Here i'm massing current month
                while ( $start <= $end ) {

                    $cdate = date('Y-m-d', $end);                
                    $key = array_search($cdate, $count_dt);                
                    if($key !== false){                  
                      $datasetarr[] = (int)$res[$key]['cnt'];
                    }else{
                      $datasetarr[] = 0;
                    }
                    $datasetlbl[] = date('d', $end);
                    $end = strtotime("+1 day", $end);

                    if( max($count_dt) < date('Y-m-d', $end) || $month != date('m', $end)){
                      break;
                    }
                }

                $datasetlbl[] = date('d', $end);
                $datasetarr[] = null;

              ?>
              <table class="table table-striped">
                 <thead>
                   <tr>
                     <td>count</td>
                     <td>date</td>
                   </tr>
                 </thead>
                 <tbody>
                   <?php
                    foreach ($res as $row)
                    {
                      echo "<tr>";
                      echo "<td>" . $row['cnt'] . "</td>";
                      echo "<td>" . $row['dt'] . "</td>";
                      echo "</tr>";
                    } 
                   ?>
                 </tbody>
              </table>

              <canvas id="line-chart" width="800" height="450"></canvas> 
              <?php 
              } 
              ?>                     
          </div>
        </div>

      </div>
      <script type="text/javascript">
      $(function(){

        <?php if($res){ ?>
        new Chart(document.getElementById("line-chart"), {
          type: 'line',
          data: {
            labels: <?php echo json_encode($datasetlbl); ?>,
            datasets: [{ 
                data: <?php echo json_encode($datasetarr); ?>,
                label: "<?php echo $mname; ?>",
                borderColor: "#515fcf",
                backgroundColor: "#515fcf",
                fill: false
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: 'Activity report 01 - <?php echo date("d", $end); ?>'
            },
            elements: {
              point:{
                  radius: 0,
                  hoverRadius: 5
              }
            },
            scales : {
                xAxes : [ {
                    display: true,
                    scaleLabel: {
                      display: true,
                      labelString: 'Day'
                    },
                    gridLines : {
                        display : false
                    }
                } ],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                      display: true,
                      labelString: 'Number of files submitted'
                    },
                    ticks: {
                        max: <?php echo (ceil((max($count_array)) / 10) * 10)+10; ?>,
                        min: 0,
                        stepSize: 10
                    }
                }]
            }
          }
        });
        <?php } ?>              

      });            
      </script>    
  </body>
  </html>
  <?php    
}

静态图表

$(function() {
  new Chart(document.getElementById("line-chart"), {
    type: 'line', data: {
      labels: [0, "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17"], datasets: [ {
        data: [null, 21, 1, 0, 0, 0, 8, 0, 24, 0, 0, 0, 0, 0, 0, 0, 1, null], label: "May", borderColor: "#515fcf", backgroundColor: "#515fcf", fill: false
      }
      ]
    }
    , options: {
      title: {
        display: true, text: 'Activity report 01 - 17'
      }
      , elements: {
        point: {
          radius: 0, hoverRadius: 5
        }
      }
      , scales: {
        xAxes: [ {
          display: true, scaleLabel: {
            display: true, labelString: 'Day'
          }
          , gridLines: {
            display: false
          }
        }
        ], yAxes: [ {
          display: true, scaleLabel: {
            display: true, labelString: 'Number of files submitted'
          }
          , ticks: {
            max: 30, min: 0, stepSize: 10
          }
        }
        ]
      }
    }
  }
  );
}

);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>


<div class="container">

  <div class="row">
    <div class="col-md-12">

      <table class="table table-striped">
        <thead>
          <tr>
            <td>count</td>
            <td>date</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2020-05-01</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2020-05-02</td>
          </tr>
          <tr>
            <td>8</td>
            <td>2020-05-06</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2020-05-16</td>
          </tr>
        </tbody>
      </table>

      <canvas id="line-chart" width="800" height="450"></canvas>

    </div>
  </div>

</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.