AngularJS实现数据可视化

概述预览我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。效果如下图所示。 大家可以到codepen-在线预览-下载收藏-效果分析实现本案例需要具备下列要素：AngularJS的基础知识ng-repeatsvg画线激情与耐心实现搭建骨架我们在html中搭建AngularJS的环境，

预览

我们来研究下利用AngularJs实现条形图、折线图等数据可视化效果。效果以下图所示。

大家可以到codepen-在线预览-下载收藏-效果

分析

实现本案例需要具有以下要素：

AngularJs的基础知识ng-repeatsvg画线豪情与耐心实现搭建骨架

我们在HTML中搭建AngularJs的环境，首先引入angularJs，然后声明ng-app，ng-controller，以下代码所示。

<script src="//cdn.bootCSS.com/angular.Js/1.3.8/angular.Js"></script><div ng-app="graphApp"> <div ng-controller="graphController"> <!-- 数据图代码 --> </div></div>

在javscript中，一样搭建骨架。

(function(){ //定义模块 var app = angular.module('graphApp',[]); //绑定控制器 app.controller('graphController',function($scope){ //参数设置 //数据图设置 });// End Controller})();绘制条形图

然后我们放入绘制条形图的代码。

<!-- 数据图代码 --> <!--bar chart--> <div class="chart"> <!-- 坐标轴 --> <div class="y"></div> <div class="x"></div> <!-- 表格数据 --> <div ng-repeat="bar in data" class="bar"></div> </div>

我们利用AngualrJs把数据绑定到HTML中，我们直接把数据放到style属性里来设置条形图的宽高、位置。

<!-- 数据图代码 --> <!--bar chart--> <div class="chart" style="wIDth:{{wIDth}}px; height:{{height}}px;"> <!-- Labels --> <div class="y" style="wIDth:{{height}}px;">{{yAxis}}</div> <div class="x">{{xAxis}}</div> <!-- Data --> <div ng-repeat="bar in data" class="bar" style="height:{{bar.value / max * height}}px; wIDth:{{wIDth / data.length - 5}}px; left:{{$index / data.length * wIDth}}px;"></div> </div>

然后我们利用Js来设置数据，需要求数据的最大值。

(function(){ //定义模块 var app = angular.module('graphApp',function($scope){ //参数设置,相对上面代码，新增内容 $scope.wIDth = 600; $scope.height = 350; $scope.yAxis = '销售成绩'; $scope.xAxis = '2014年销售情况变化'; //数据设置 $scope.data = [ { label: 'January',value: 36 },{ label: 'February',value: 54 },{ label: 'march',value: 62 },{ label: 'April',value: 82 },{ label: 'May',value: 96 },{ label: 'June',value: 104 },{ label: 'July',value: 122 },{ label: 'August',value: 112 },{ label: 'September',value: 176 },{ label: 'October',value: 150 },{ label: 'November',value: 84 },{ label: 'December',value: 123 } ]; //求最大值 $scope.max = 0; var arrLength = $scope.data.length; for (var i = 0; i < arrLength; i++) { // Find Maximum X Axis Value if ($scope.data[i].value > $scope.max) $scope.max = $scope.data[i].value; } });// End Controller})();

固然，CSS（我们使用sCSS）里也需要做1些相干设置，以下面代码所示。

// 布局与样式 * {Box-sizing:border-Box;}h1,h2 { color: #D07371;}body { Font-size:1.1em; text-align:center; background:#F4F0DC; color:#444;}// 表格设置，设置边框与相对定位.chart { border-left:1px solID black; border-bottom:1px solID black; margin:60px auto; position:relative;}// 坐标轴设置.y { Font-weight:bold; border-bottom:1px solID #71CBD0; position:absolute; text-align:center; padding: 10px; transform: rotate(-90deg); transform-origin: bottom left; bottom:0; color: #D07371;}.x { Font-weight:bold; border-top:1px solID #71CBD0; position:absolute; wIDth: 100%; text-align:center; padding: 10px; top:100%; color:#D07371;}// 条形图设置.bar { background:rgba(0,0,240,0.4); position:absolute; bottom:0; &:nth-of-type(even) { background:rgba(200,0.4); }}绘制其他图形

对点图来讲，实现原理和条形图1样，不再赘述。
对折线图来讲，我们使用svg来绘制线条，代码以下所示。

<!--svg line chart--> <h2>SVG line Chart</h2> <div class="chart" style="wIDth:{{wIDth}}px; height:{{height}}px;"> <!-- Labels --> <div class="y" style="wIDth:{{height}}px;">{{yAxis}}</div> <div class="x">{{xAxis}}</div> <!-- Data --> <svg style="wIDth:{{wIDth}}px; height:{{height}}px;"> <line ng-repeat="line in data" x1="{{$index / data.length * wIDth }}" y1="{{data[$index - 1].value / max * height}}" x2="{{($index + 1) / data.length * wIDth}}" y2="{{line.value / max * height}}"> </line> </svg> </div>

然后设置CSS

// SVG line chartsvg { position:absolute; transform:rotateX(180deg); left:0;}line { stroke:rgba(0,200,.4); stroke-wIDth:3px;}

固然，我们也能够实现多种图形的混搭，具体代码参加codepen，-在线预览-下载收藏-。

声明

前端开发whqet，关注前端开发，分享相干资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何情势的转载，烦请注明装载，保存本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/44060443
欢迎大家访问独立博客http://whqet.github.io

总结

以上是内存溢出为你收集整理的AngularJS实现数据可视化全部内容，希望文章能够帮你解决AngularJS实现数据可视化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。