预览
我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。效果如下图所示。
分析
实现本案例需要具备下列要素：
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 Value
if ($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，-在线预览-下载收藏-。
欢迎大家访问独立博客http://whqet.github.io