Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax
2019独角兽企业重金招聘Python工程师标准>>>
大致思路也就是下面,由于最近在学Laravel也在学Angularjs,加上之前做的项目用到了d3。
原来的方案如下:
jQuery+highchart.js+Django
jQuery主要于ajax,以及Json解析 详情可见:http://api.phodal.com
现在的方案就变成了
Laravel+Angularjs+D3+Bootstrap
效果可见:www.xianuniversity.com/athome
最后效果图如下所示:
代码可见:https://github.com/gmszone/learingphp
框架简介
Laravel
Angular
AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。
不过,一开始是考虑ember js,不喜欢谷歌学术化的东西。只是ember js的体积暂时让我失去了兴趣。。
D3
D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。
Bootstrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
一个又一个的开源组合起来,形成了巨大的优势。就是对热门的技术感兴趣。。。(转载自Phodal's Blog)
创建RESTful
这个也就是由Lavarel来完成了。
php artisan migrate:make create_athomes_table
打开对就的table进行修改,代码大致如下
<?phpuse Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;class CreateAthomesTable extends Migration {/*** Run the migrations.** @return void*/public function up(){Schema::create('athomes', function(Blueprint $table){$table->increments('id');$table->float('temperature');$table->float('sensors1');$table->float('sensors2');$table->boolean('led1');$table->timestamps();});}/*** Reverse the migrations.** @return void*/public function down(){Schema::drop('athomes');}}
还需要在models下添加一个class
<?phpclass Athomes extends Eloquent {protected $table = 'athomes';}
添加到routes.php
Route::get('/athome/{atid}',function($atid){$atdata=Athomes::where('id','=',$atid)->select('id','temperature','sensors1','sensors2','led1')->get();return Response::json($atdata);
});
再为其创建一个页面
Route::get('/athome',function(){$maxid=Athomes::max('id');return View::make('athome')->with('maxid',$maxid);
});
添加两个seeds
class AthomesTableSeeder extends Seeder
{public function run(){Athomes::create(array('temperature'=>'19.8','sensors1'=>'22.2','sensors2'=>'7.5','led1'=>False));Athomes::create(array('temperature'=>'18.8','sensors1'=>'22.0','sensors2'=>'7.6','led1'=>False));}
}
然后,
php artisan migrate
php artisan db:seed
这样我们就完成了REST的创建
打开/athome/1看有没有出现相应的json数据
添加Angularjs
开始之前我们需要修改angularjs,默认的{{我选择了喜欢的<%,修改代码如下
var myApp = angular.module('myApp', [], function($interpolateProvider) {$interpolateProvider.startSymbol('<%');$interpolateProvider.endSymbol('%>');});
让我们用一个简单的例子来测试下是否工作。
function FetchCtrl($scope, $http, $templateCache) {$scope.method = 'GET';$scope.url = '<?= url('/athome/1') ?>';$scope.code = null;$scope.response = null;$http({method: $scope.method, url: $scope.url, cache: $templateCache}).success(function(data, status) {$scope.status = status;$scope.data = data;$.each(data,function(key,val){sensorsData.push(val.sensors1);})}).error(function(data, status) {$scope.data = data || "Request failed";$scope.status = status;log.l("Request Failed");});}
HTML代码
<div id="App1" ng-app="myApp" ng-controller="FetchCtrl"><pre>http status code: <%status%></pre><pre>http response data: <%data%></pre></div>
至于为什么会写一个id="App1"是因为会出现一个id="App2",也就是两个angularjs的App,需要在第二个下面添加:
angular.bootstrap(document.getElementById("App2"),['chartApp']);
那么效果应该如下所示:
http status code: 200
http response data: [{"id":1,"temperature":19.799999237061,"sensors1":22.200000762939,"sensors2":7.5,"led1":0}]
或如下图所示
D3
var app = angular.module('chartApp', ['n3-charts.linechart']);app.controller('MainCtrl', function($scope, $http, $templateCache) {$scope.click=function(){$scope.options = {lineMode: 'cardinal',series: [{y: 'value', label: '温度', color: 'steelblue'}]};$scope.data=[{x:0,value:12}];$scope.url = '<?= url('/athome') ?>';$scope.url=$scope.url+'/'+{{$maxid}};log.l($scope.url);$scope.method = 'GET';$http({method: $scope.method, url: $scope.url, cache: $templateCache}).success(function(data, status) {$.each(data,function(key,val){$scope.data.push({x:1,value:val.sensors1});$scope.data.push({x:2,value:val.sensors2});log.l($scope.data);})}).error(function(data, status) {$scope.data = data || "Request failed";log.l("Request Failed");});}});
HTML代码如下:
<div id="App2" ng-controller="MainCtrl"><button ng-click="click()" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Star
获取数据</button><linechart data='data' options='options'></linechart></div>
转载于:https://my.oschina.net/u/998304/blog/410586
Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax相关推荐
- 【转】Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax
http://897371388.iteye.com/blog/1975351 大致思路也就是下面,由于最近在学Laravel也在学Angularjs,加上之前做的项目用到了d3. 原来的方案如下: ...
- Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍 实验介绍 在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
- 打造轻量级可视化数据爬取工具-菩提
作者:jiaqiangwang,腾讯 IEG 后台开发工程师 背景 在大数据及机器学习日益火爆的今天,数据作为基石发挥了至关重要的作用.网页内容爬取作为数据的一个重要补充来源,数据爬取开发成了一个必不 ...
- Ajax解析laravelJSON,3分钟短文:Laravel请求体内JSON格式数据的处理办法
原标题:3分钟短文:Laravel请求体内JSON格式数据的处理办法 引言 前几篇文章我们讲了表单数据的接收,验证等功能.也说到了传送的数组如何处理, 今天我们说一下如果传送的数据是JSON格式,其处 ...
- python拿什么做可视化界面好-用python打造可视化爬虫监控系统,酷炫的图形化界面...
原标题:用python打造可视化爬虫监控系统,酷炫的图形化界面 本文并不是讲解爬虫的相关技术实现的,而是从实用性的角度,将抓取并存入 MongoDB 的数据 用 InfluxDB 进行处理,而后又通过 ...
- laravel基础课程---11、lavarel的ajax操作(ajax优劣势是什么)
laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结 一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高 优势:减轻数据库压力 缺 ...
- 打造大数据和AI能力底座 联通大数据深度参与“新基建”
年初至今,国家关于"新基建"的政策持续发布,引起社会各界广泛关注.目前来看,官方定义的新型基础设施主要包括信息基础设施.融合基础设施.创新基础设施三方面内容.疫情过后,新型基础设施 ...
- 华为云FusionInsight助力宇宙行打造金融数据湖新标杆
摘要:工行采用了华为云FusionInsight MRS大数据存算分离方案,实现了大数据平台与OBS对象存储服务的对接,将原有的HDFS数据无缝迁移到OBS上.在保证性能的前提下,实现了计算与存储独立 ...
- 《大屏可视化数据》该怎么设计?
前言:数据可视化是什么?可视化数据有哪些主要特征?为什么要使用大屏展示可视化数据?数据可视化是综合运用计算机图形学.图像.人机交互等,将采集.清洗.转换.处理过的符合标准和规范的数据映射为可识别的图形 ...
最新文章
- group by 分组后 返回的是一个同属性的集合
- 递归二分法php,PHP基于二分法实现数组查找功能示例【循环与递归算法】
- C C++编程产生指定范围内的随机数
- linux之vsftpd配置
- wegame饥荒一直连接中_腾讯WeGame注册用户超3亿 国产游戏销量超500万
- 基于VS Code创建Java command-line app
- 浅析C++的三大循环-以100以内的质数求解为例
- 数据消费过程_特色鲜卤现捞加盟店经营要如何抓准消费群体定位
- IE无法打开新窗口与U盘不显示故障的解决
- 2014年电大计算机应用基础考,2017年电大计算机应用基础网考精彩试题与问题详解...
- JavaScript:手写JSONP
- 在python 中is和= = 的区别
- java定时执行bat_如何自动执行多个批处理命令
- 的谐音歌词_今日新歌,李诞肯定最烦这张谐音梗专辑
- 【算法设计与分析】专栏目录
- c语言中fprintf的作用,c语言中fprintf的用法
- iis,w3wp一直出现WerFault.exe应用程序错误
- 机器学习算法平台alink_阿里正式开源通用算法平台Alink,“双11”将天猫推荐点击率提升4...
- Python英文词频统计(哈姆雷特)程序示例
- 关联分析——关联规则应用及案例