AngularJS实现数据可视化

页面导航:首页 > 网络编程 > JavaScript > AngularJS实现数据可视化

AngularJS实现数据可视化

来源: 作者: 时间:2016-02-02 09:59 【

预览我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。效果如下图所示。大家可以到codepen-在线预览-下载收藏-效果分析实现本案例需要具备下列要素:AngularJS的基础知识

这里写图片描述

预览

我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。效果如下图所示。
这里写图片描述
大家可以到codepen-在线预览-下载收藏-效果<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgyIGlkPQ=="分析">分析

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

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

实现

搭建骨架

我们在中搭建AngularJS的环境,首先引入angularJS,然后声明ng-app,ng-controller,如下代码所示。

<script src=//cdn.bootcss.com/angular.js/1.3.8/angular.js></script>

在javscript中,同样搭建骨架。

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

    //数据图设置

  });// End Controller
})();

绘制条形图

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

    
    
    
 
 
 

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

    
    
    
{{yAxis}}
{{xAxis}}
 

然后我们利用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);
  }www.2cto.com
}

绘制其他图形

对于点图来说,实现原理和条形图一样,不再赘述。
对于折线图来说,我们使用svg来绘制线条,代码如下所示。

    
    

SVG Line Chart

{{yAxis}}
{{xAxis}}    

然后设置

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

当然,我们也可以实现多种图形的混搭

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<