欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

​Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax

Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gmszone/article/details/14053129

大致思路也就是下面,由于最近在学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

Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。
开发应该是一个创造性的过程, 让你你享受,而不是让你很痛苦的事情。

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进行修改,代码大致如下

  1. <?php
  2. use Illuminate\Database\Schema\Blueprint;
  3. use Illuminate\Database\Migrations\Migration;
  4. class CreateAthomesTable extends Migration {
  5. /**
  6. * Run the migrations.
  7. *
  8. * @return void
  9. */
  10. public function up()
  11. {
  12. Schema::create('athomes', function(Blueprint $table)
  13. {
  14. $table->increments('id');
  15. $table->float('temperature');
  16. $table->float('sensors1');
  17. $table->float('sensors2');
  18. $table->boolean('led1');
  19. $table->timestamps();
  20. });
  21. }
  22. /**
  23. * Reverse the migrations.
  24. *
  25. * @return void
  26. */
  27. public function down()
  28. {
  29. Schema::drop('athomes');
  30. }
  31. }

还需要在models下添加一个class


  1. <?php
  2. class Athomes extends Eloquent {
  3. protected $table = 'athomes';
  4. }

添加到routes.php


  1. Route::get('/athome/{atid}',function($atid){
  2. $atdata=Athomes::where('id','=',$atid)
  3. ->select('id','temperature','sensors1','sensors2','led1')
  4. ->get();
  5. return Response::json($atdata);
  6. });

再为其创建一个页面


  1. Route::get('/athome',function(){
  2. $maxid=Athomes::max('id');
  3. return View::make('athome')->with('maxid',$maxid);
  4. });

添加两个seeds


  1. class AthomesTableSeeder extends Seeder
  2. {
  3. public function run()
  4. {
  5. Athomes::create(array(
  6. 'temperature'=>'19.8',
  7. 'sensors1'=>'22.2',
  8. 'sensors2'=>'7.5',
  9. 'led1'=>False
  10. ));
  11. Athomes::create(array(
  12. 'temperature'=>'18.8',
  13. 'sensors1'=>'22.0',
  14. 'sensors2'=>'7.6',
  15. 'led1'=>False
  16. ));
  17. }
  18. }

然后,


  1. php artisan migrate
  2. php artisan db:seed

这样我们就完成了REST的创建


打开/athome/1看有没有出现相应的json数据


添加Angularjs

开始之前我们需要修改angularjs,默认的{{我选择了喜欢的<%,修改代码如下

  1. var myApp = angular.module('myApp', [], function($interpolateProvider) {
  2. $interpolateProvider.startSymbol('<%');
  3. $interpolateProvider.endSymbol('%>');
  4. });

让我们用一个简单的例子来测试下是否工作。


  1. function FetchCtrl($scope, $http, $templateCache) {
  2. $scope.method = 'GET';
  3. $scope.url = '<?= url('/athome/1') ?>';
  4. $scope.code = null;
  5. $scope.response = null;
  6. $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
  7. success(function(data, status) {
  8. $scope.status = status;
  9. $scope.data = data;
  10. $.each(data,function(key,val){
  11.         sensorsData.push(val.sensors1);
  12. })
  13. }).
  14. error(function(data, status) {
  15. $scope.data = data || "Request failed";
  16. $scope.status = status;
  17. log.l("Request Failed");
  18. });
  19. }

HTML代码
  1. <div id="App1" ng-app="myApp" ng-controller="FetchCtrl">
  2. <pre>http status code: <%status%></pre>
  3. <pre>http response data: <%data%></pre>
  4. </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

我们最后用来产生数据的部分。
这里依赖于 https://github.com/n3-charts/line-chart 这个库。
故而比较简单
  1. var app = angular.module('chartApp', ['n3-charts.linechart']);
  2. app.controller('MainCtrl', function($scope, $http, $templateCache) {
  3. $scope.click=function(){
  4. $scope.options = {lineMode: 'cardinal',series: [{y: 'value', label: '温度', color: 'steelblue'}]};
  5. $scope.data=[{x:0,value:12}];
  6. $scope.url = '<?= url('/athome') ?>';
  7. $scope.url=$scope.url+'/'+{{$maxid}};
  8. log.l($scope.url);
  9. $scope.method = 'GET';
  10. $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
  11. success(function(data, status) {
  12. $.each(data,function(key,val){
  13.         $scope.data.push({x:1,value:val.sensors1});
  14.         $scope.data.push({x:2,value:val.sensors2});
  15.         log.l($scope.data);
  16. })
  17. }).
  18. error(function(data, status) {
  19. $scope.data = data || "Request failed";
  20. log.l("Request Failed");
  21. });
  22. }
  23. });

HTML代码如下:
  1. <div id="App2" ng-controller="MainCtrl">
  2. <button ng-click="click()" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Star
  3. 获取数据</button>
  4. <linechart data='data' options='options'></linechart>
  5. </div>

补充:里面使用了bootstrap框架


来自 https://blog.csdn.net/phodal/article/details/14053129




普通分类: