집 > 기사 > 백엔드 개발 > php+ajax+echarts.js를 사용하여 분당 통계 응답 곡선 차트 구현

php+ajax+echarts.js를 사용하여 분당 통계 응답 곡선 차트 구현

不言원래의: 2018-04-03 17:23:242310검색

이전 블로그에 이어 통계 합계 구현 외에도 바이두의 전자 차트를 사용하여 통계 답변 곡선 차트도 구현했습니다. 효과는 다음과 같습니다: http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/index

Baidu 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(&#39;sum&#39;)}" target="_blank">实时统计平台答题总量</a>


</body>
</html>

<script type="text/javascript">




var myChart = echarts.init(document.getElementById(&#39;main&#39;));
option = {
    title : {
        text: &#39;过去3小时答题情况&#39;,
        subtext: &#39;浙江工商大学新生事业教育平台试试答题数据&#39;
    },
    tooltip : {
        trigger: &#39;axis&#39;
    },
    legend: {
        data:[&#39;过去3小时答题量&#39;]
    },
    
    calculable : true,
    xAxis : [
        {
            type : &#39;category&#39;,
            boundaryGap : false,
            data : []
        }
    ],
    yAxis : [
        {
            type : &#39;value&#39;,
            axisLabel : {
                formatter: &#39;{value}&#39;
            }
        }
    ],
    series : [
        {
            name:&#39;实时答题统计&#39;,
            type:&#39;line&#39;,
            data:[],
        },
        
    ]
};


 // 使用刚指定的配置项和数据显示图表。

url = "{:U(&#39;Statis/data&#39;)}";
myChart.setOption(option);
// url = &#39;http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/data&#39;;

$.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(&#39;Y-m-d H:i&#39;, $time);

            
            $map[&#39;time&#39;]  = array(&#39;between&#39;,array(date(&#39;Y-m-d H:i&#39;, $time),date(&#39;Y-m-d H:i&#39;, $time+60)));
            $dataArray[] = D(&#39;Exercise&#39;)->where($map)->count();
        }

        $data = array(
            &#39;x_data&#39;=>$timeArray, 
            &#39;y_data&#39;=>$dataArray
        );
        
        $this->ajaxReturn($data);
    }

시간당 분을 가로좌표로 사용하고, 그리고 답안 데이터의 양을 세로축으로 하여 그래프를 그려봅니다

위 내용은 php+ajax+echarts.js를 사용하여 분당 통계 응답 곡선 차트 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：SQL 주입으로 이어지는 SESSION 변수 범위를 해결하는 솔루션 common.inc.php다음 기사：SQL 주입으로 이어지는 SESSION 변수 범위를 해결하는 솔루션 common.inc.php