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

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

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

框架简介LaravelLaravel是一套简洁、优雅的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来完成了。

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 这个库。故而比较简单

    <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>

补充:里面使用了bootstrap框架

查看更多 下一篇