AngularJS实现数据可视化

最新推荐文章于 2024-06-23 09:35:29 发布

whqet

最新推荐文章于 2024-06-23 09:35:29 发布

阅读量1.9w

点赞数 19

分类专栏： javascript 文章标签：可视化数据 angularjs

本文链接：https://blog.youkuaiyun.com/whqet/article/details/44060443

版权

这里写图片描述

预览

我们来研究下利用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