AngularJS实现数据可视化

女爷i 2022-08-05 15:20 309阅读 0赞

![这里写图片描述][20150305084852353]

## 预览 ##

我们来研究下利用AngularJS实现条形图、折线图等数据可视化效果。效果如下图所示。  
![这里写图片描述][20150305102157050]  
大家可以到codepen-[在线预览][Link 1]\-[下载收藏][Link 2]\-效果

## 分析 ##

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

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

## 实现 ##

### 搭建骨架 ###

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

在javscript中，同样搭建骨架。

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

### 绘制条形图 ###

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

<div class="chart">
          
          <div class="y"></div>
          <div class="x"></div>
          
          <div ng-repeat="bar in data" class="bar"></div>
        </div>

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

<div class="chart" style="width:{ {width}}px; height:{ {height}}px;">
          
          <div class="y" style="width:{ {height}}px;">{
       {yAxis}}</div>
          <div class="x">{
       {xAxis}}</div>
          
           <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来设置数据，需要求数据的最大值。

当然，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来绘制线条，代码如下所示。

<h2>SVG Line Chart</h2>
        <div class="chart" style="width:{ {width}}px; height:{ {height}}px;">
          
          <div class="y" style="width:{ {height}}px;">{
       {yAxis}}</div>
          <div class="x">{
       {xAxis}}</div>
          
          <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，-[在线预览][Link 1]\-[下载收藏][Link 2]\-。

## 声明 ##

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

[20150305084852353]: /images/20220805/98a5637e46b840dda3d824bac81bc0c6.png
[20150305102157050]: /images/20220805/f88f2e04534a4e548d00eca81b855b0c.png
[Link 1]: http://codepen.io/whqet/pen/pvZwpO?editors=100
[Link 2]: http://codepen.io/whqet/share/zip/pvZwpO/
[http_blog.csdn.net_whqet_article_details_44060443]: http://blog.csdn.net/whqet/article/details/44060443
[http_whqet.github.io]: http://whqet.github.io