预览

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

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

分析

实现本案例需要具备下列要素：

• AngularJS的基础知识
• ng-repeat
• svg画线
• 激情与耐心

实现

搭建骨架

我们在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',[]);//绑定控制器app.controller('graphController', 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 Valueif ($scope.data[i].value > $scope.max)$scope.max = $scope.data[i].value;}});// End Controller
})();

当然，css（我们使用scss）里也需要做一些相关设置，如下面代码所示。

// 布局与样式 
* {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,240,0.4);}
}

绘制其他图形

对于点图来说，实现原理和条形图一样，不再赘述。
对于折线图来说，我们使用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 chart
svg {position:absolute;transform:rotateX(180deg);left:0;
}
line  {stroke:rgba(0,0,200,.4);stroke-width:3px;
}

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

声明

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