用php+ajax+echarts.js 實現統計每分鐘答題曲線圖

最後更新：2018-04-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

接著上一篇部落格，除了實現統計總量外，我還用百度的echart實現了統計答題曲線圖。效果如下：http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index

百度echart是一個專業的花統計圖，曲線圖的第三方js類庫。按照使用說明使用還是蠻簡單的。

原始碼如下

前端 html+js+css代碼如下

{__NOLAYOUT__}<!DOCTYPE html><html><head>    <meta charset="utf-8">    <!-- 引入 ECharts 檔案 -->    <script src="__PUBLIC__/admin/js/echarts.common.min.js"></script>    <script src="__PUBLIC__/admin/js/jquery.min.js"></script></head><body>    <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->    <p id="main" style="width: 1400px;height:600px;"></p>    <a href="{:U('sum')}" target="_blank">即時統計平台答題總量</a></body></html><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));option = {    title : {        text: '過去3小時答題情況',        subtext: '浙江工商大學新生事業教育平台試試答題資料'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['過去3小時答題量']    },        calculable : true,    xAxis : [        {            type : 'category',            boundaryGap : false,            data : []        }    ],    yAxis : [        {            type : 'value',            axisLabel : {                formatter: '{value}'            }        }    ],    series : [        {            name:'即時答題統計',            type:'line',            data:[],        },            ]}; // 使用剛指定的配置項和資料顯示圖表。url = "{:U('Statis/data')}";myChart.setOption(option);// url = 'http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/data';$.get(url).done(function (data) {        // 填入資料    myChart.setOption({        xAxis: {            data: data.x_data        },        series: [{            // 根據名字對應到相應的系列            data: data.y_data        }]    });});    setInterval(function () {        $.get(url).done(function (data) {        // 填入資料        myChart.setOption({            xAxis: {                data: data.x_data            },            series: [{                // 根據名字對應到相應的系列                data: data.y_data            }]        });    });}, 60000);  //一秒鐘統計一次</script>

後台php代碼

public function data() {                $now = time();        // $timeArray = new array();        for($i=1;$i<=180;$i++){                        $time = $now - 3 * 60 * 60 + 60 * $i;            $timeArray[] = date('Y-m-d H:i', $time);                        $map['time']  = array('between',array(date('Y-m-d H:i', $time),date('Y-m-d H:i', $time+60)));            $dataArray[] = D('Exercise')->where($map)->count();        }        $data = array(            'x_data'=>$timeArray,             'y_data'=>$dataArray        );                $this->ajaxReturn($data);    }

用每時間分鐘作為橫座標，答題資料量作為縱座標畫圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More