php+ajax+echarts.js を使用して、1 分あたりの統計的回答曲線グラフを実装します。
前回のブログに引き続き、統計集計の実装に加えて、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('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);
}横軸として時間あたりの分を使用し、回答データ量を縦軸としてグラフを描きます
以上がphp+ajax+echarts.js を使用して、1 分あたりの統計的回答曲線グラフを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7457
15
1376
52
77
11
17
11
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
Dec 24, 2024 pm 04:42 PM
PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。
CakePHP データベースの操作
Sep 10, 2024 pm 05:25 PM
CakePHP でデータベースを操作するのは非常に簡単です。この章では、CRUD (作成、読み取り、更新、削除) 操作について理解します。
CakePHP ファイルのアップロード
Sep 10, 2024 pm 05:27 PM
ファイルのアップロードを行うには、フォーム ヘルパーを使用します。ここではファイルアップロードの例を示します。
CakePHP について話し合う
Sep 10, 2024 pm 05:28 PM
CakePHP は、PHP 用のオープンソース フレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー
CakePHP のロギング
Sep 10, 2024 pm 05:26 PM
CakePHP へのログインは非常に簡単な作業です。使用する関数は 1 つだけです。 cronjob などのバックグラウンド プロセスのエラー、例外、ユーザー アクティビティ、ユーザーが実行したアクションをログに記録できます。 CakePHP でのデータのログ記録は簡単です。 log()関数が提供されています
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
Dec 20, 2024 am 11:31 AM
Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、
