ホームページ > 記事 > バックエンド開発 > php+ajax+echarts.js を使用して、1 分あたりの統計的回答曲線グラフを実装します。

php+ajax+echarts.js を使用して、1 分あたりの統計的回答曲線グラフを実装します。

不言オリジナル: 2018-04-03 17:23:242260ブラウズ

前回のブログに引き続き、統計集計の実装に加えて、Baiduのechartを利用して統計回答曲線図も実装してみました。効果は次のとおりです。 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 を使用して、1 分あたりの統計的回答曲線グラフを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：SQL インジェクションにつながる dedeccms SESSION 変数カバレッジの解決策 common.inc.php次の記事：SQL インジェクションにつながる dedeccms SESSION 変数カバレッジの解決策 common.inc.php

続きを見る