使用 mysql 和 ajax 用 FLOT 绘制图形

Question

我正在尝试使用 flot 来绘制一些从 MySQL 数据库中提取的数据。我正在记录用户登录访问，并且我有一个 SQL 函数，它将检索给定月份每天的访问次数 getStats($day)。我已经在网上阅读了一些如何正确执行此操作的示例，但由于某种原因，当我尝试在我的 javascript 文件中绘制数组数据时，它显示为空 --> 'data:'。下面是我的代码。我正在使用 CI 框架，所以如果对我的代码有一些疑问，很可能是因为这个。我有硬编码的数据，它工作正常。在此问题上的任何帮助将不胜感激，目前在数据库中使用 flot 的情况并不多。

模型--->metrics.php

function showUsers() {

    //get the number of days in the current month and the first day
    $num_days = cal_days_in_month(CAL_GREGORIAN, date(m), date(Y));
    $first_day = strtotime(date('Y').'-'.date('m').'-01');

    //iterate through all of the days
    while( $i < $num_days ) {

         //get the user visits for each day of the month
         $log = $this->db->getStats($first_day);

         //add +1 day to the current day
         $first_day += 86400;
         $flot_visits[] = '['.($first_day*1000).','.$log->fields['total'].']';
         $i++;
    }

    //format in acceptable format for flot
    $content['visits'] = '['.implode(',',$flot_visits).']';

    //load the view and pass the array
    $this->load->vars($content);
    $this->load->view('metrics/user_metrics', $content);
}

查看---> user_metrics.php

 <div id ="visits_graph" style="width:600px; height:300px"></div>

Javascript ---> user_metrics.js

function metrics() {

   $.ajax({
            type: "POST",
            url: pathurl + "metrics/showUsers",
            data: "",
            success: function(data) {
                   graph_visits();
            }
         });
}

function graph_visits() {

     $.plot($('#visits_graph'), [
         { label: 'Visits', data: <?php echo $visits ?> }
         ], {
               xaxis: {
                         mode: "time",
                         timeformat: "%m/%d/%y"
                      },
               lines: { show: true },
               points: { show: true },
               grid: { backgroundColor: #fffaff' }
         });
}

Answer 1

我让它工作，但不是我想要的方式。我想我会发布答案，所以如果其他人遇到这个问题，他们至少可以让它工作。

所以出于某种原因，我假设是因为 JavaScript 文件和实际的视图（html）文件是分开的，因为该数组对 JavaScript 文件不可见的框架。问题出在函数中

function graph_visits() {

 $.plot($('#visits_graph'), [
     { label: 'Visits', data: <?php echo $visits ?> }
     ], {
           xaxis: {
                     mode: "time",
                     timeformat: "%m/%d/%y"
                  },
           lines: { show: true },
           points: { show: true },
           grid: { backgroundColor: #fffaff' }
     });
}

因为它们是分开的

          <?php echo $visits ?> 

什么都不返回。我修复它的方法只是进入视图，然后在 html 文件顶部的两个标签之间复制并粘贴函数的内容。它应该是这样的，

<script language="javascript">


   $.plot($('#visits_graph'), [
     { label: 'Visits', data: <?php echo $visits ?> }
     ], {
           xaxis: {
                     mode: "time",
                     timeformat: "%m/%d/%y"
                  },
           lines: { show: true },
           points: { show: true },
           grid: { backgroundColor: #fffaff' }
     });

</script>

我不太喜欢这个解决方案，因为它脱离了框架，但到目前为止，它是我能想到的唯一解决方案。

Answer 2

我认为您的问题出在指标功能内。 （我猜你也在使用 JQuery）

目前，您的指标函数在后端请求一个页面，但没有做任何事情。

1. 将后端方法 showUsers() 更改为：

    function showUsers() {
        //get the number of days in the current month and the first day
        $num_days = cal_days_in_month(CAL_GREGORIAN, date(m), date(Y));
        $first_day = strtotime(date('Y').'-'.date('m').'-01');

        //iterate through all of the days
        while( $i db->getStats($first_day);

         //add +1 day to the current day
         $first_day += 86400;

         //change this to be a nested array
         $flot_visits[] = array( ($first_day*1000) , $log->fields['total'] );
         $i++;
    }

        //output javascript array
        echo json_encode( $flot_visits );
    }

1. 将 user_metrics.js 更改为：

    function metrics() {    
       $.getJSON({
                pathurl + "metrics/showUsers",
            function(data) {
                       //use the returned data
                       graph_visits(data);
                }
             });
    }


    function graph_visits( graphData ) {
         $.plot($('#visits_graph'), [
             { label: 'Visits', data: graphData }
             ], {
                   xaxis: {
                             mode: "time",
                             timeformat: "%m/%d/%y"
                          },
                   lines: { show: true },
                   points: { show: true },
                   grid: { backgroundColor: #fffaff' }
             });
    }