AngularJS实现数据可视化

AngularJS实现数据可视化

预览

我们来研究下利用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 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，-在线预览-下载收藏-。

声明

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