使用angular resource载入中priorityData.json中间json数据，结合D3绘制甜甜圈图。执行index.html其结果见于图。：

priorityData.json中json数据例如以下：

{

   "priority":{

      "Blocker":12,

      "Critical":18,

      "Major":5,

      "Minor":30,

      "Trivial":24

   }

}

index.html代码例如以下：

<!DOCTYPE html>

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>

<body ng-app="myApp" ng-controller=MainCtrl>

		<li ng-repeat="(priority, val) in priorityData">

			<span >{{priority}}</span>

			<span >{{val}}</span>

		</li>

  <priority-graph data="priorityData"></priority-graph>

  <script>

var myApp = angular.module('myApp', ['ngResource']);

//define app factory

myApp.factory('DataFac',function($resource){

	return $resource('priorityData.json',{});

});

//define app controller

myApp.controller('MainCtrl',function($scope,DataFac){

	DataFac.get(function(response){

		$scope.priorityData = response.priority;

	})

});

//define app directive

myApp.directive('priorityGraph', function(){

	  function link(scope, el, attr){

          //set graph width,height and radius

		  var width=960,

		  height=500,

		  radius=Math.min(width,height)/2;

		  //set color range

		  var color=d3.scale.ordinal().range(["rgb(166,60,48)", "rgb(229,144,78)", " rgb(221,226,77)", "rgb(157,211,72)", "rgb(40,106,151)"]);

		  //set outer radius and inner radius for donut chart

		  var arc=d3.svg.arc()

		  .outerRadius(radius-80)

		  .innerRadius(radius-150);

		  //watch data change from json

	      scope.$watch('data', function(data){

	      if(!data){ return; }

	      //change json to two arrays for category and count

	      //count array

			var countArr=[];

	      //category array

			var categoryArr=[];

		  //total number of issues

	        var total=0;

			for (key in data){

				if(data.hasOwnProperty(key)){

					categoryArr.push(key);

					countArr.push(data[key]);

					total+=data[key];

				}

			}

	      //get the graph parent element

		   el = el[0];

	      // remove the graph if already exist, in case of repeat

		  d3.select( el ).select( 'svg' ).remove();

	      var pie=d3.layout.pie()

	      .sort(null)

	      .value(function(d){return d});

	      var svg=d3.select(el).append("svg")

	    		  .attr("width",width)

	    		  .attr("height",height)

	    		  .append("g")

	    		  .attr("transform","translate("+width/2+","+height/2+")");

		  var g=svg.selectAll(".arc")

		  .data(pie(countArr))

		  .enter().append("g")

		  .attr("class","arc");

		  //paint the grah

		  g.append("path")

		  .attr("d",arc)

		  .style("fill",function(d,i){return color(i);});

		  //paint the text

		  g.append("text")

		  .attr("transform",function(d){return "translate("+arc.centroid(d)+")";})

		  .attr("dy",".35em")

		  .style("text-anchor","middle")

		  .text(function(d,i){return categoryArr[i]+":"+countArr[i]});

		  //paint total number in the middle of graph

		  g.append("text")

	      .attr("dy", ".35em")

	      .style("text-anchor", "middle")

	      .text(function(d) { return total+" tickets"; });

	    }, true);

	  }

	  return {

	    link: link,

	    restrict: 'E',

	    scope: { data: '=' }

	  };

	});

  </script>

</body>

</html>

使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本的更多相关文章

  1. java中json数据生成和解析(复杂对象演示)

    1.json简单介绍 1.1 json是最流行和广泛通用的数据传输格式,简称JavaScript Object Notation,最早在JavaScript中使用. 1.2 举个例子,下面是一个jso ...

  2. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  3. 对 JSON 数据进行序列化和反序列化

    如何:对 JSON 数据进行序列化和反序列化 2017/03/30 作者 JSON(JavaScript 对象符号)是一种高效的数据编码格式,可用于在客户端浏览器和支持 AJAX 的 Web 服务之间 ...

  4. Angular $http解析通过接口获得的json数据

    刚接触angular不久,对很多东西都不了解,今天需要用angular通过接口得到json数据,折腾了好久,总算是能获取到数据了,下面是部分源码,仅供参考: HTML部分: <body ng-a ...

  5. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  6. ngResource提交json数据如何带参数

    ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...

  7. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...

  8. ng1 http 读取json数据

    在前端开发过程中,有时后端还没开发出接口,需要经常自己构造获取本地mock数据. AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服 ...

  9. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

随机推荐

  1. c++ char_traits模板类的实现！！！

    本人写过与此相关的两篇博客,一个是<cstring>头文件的实现,还有一个是<cwchar>的实现.这里的char_traits模板类在此基础上实现. 为了方便.将源码一起封装 ...

  2. Android事件详解——拖放事件DragEvent

    1.Android拖放框架的作用? 利用Android的拖放框架,可以让用户用拖放手势把一个View中的数据移到当前layout内的另一个View中去. 2.拖放框架的内容? 1)拖放事件类 2)拖放 ...

  3. flexbox语法（摘抄）

    flex 容器上的属性: flex-direction: row | row-reverse | column | column-reverse (项目的排列方向) flex-wrap : nowra ...

  4. Android RingtoneManager铃声管理

    本篇介绍一下跳转到系统铃声选择界面,android中的铃声通过RingtoneManager管理,RingtoneManager管理来电铃声(TYPE_RINGTONE).提示音(TYPE_NOTIF ...

  5. 黑客白皮书:如何成为一名黑客(附FAQ)

    内容一览 为什么会有这份文档? 什么是黑客? 黑客应有的态度 黑客的基本技能 黑客文化中的地位 黑客和书呆子(Nerd)的联系 风格的意义 其它资源 FAQ(常问问题解答)   作为Jargon Fi ...

  6. ThinkPhp学习06

    原文:ThinkPhp学习06 一.简单学习修改用户信息模块 1.编写UserAction.class.php <?php class UserAction extends Action{ pu ...

  7. zoj 3870

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5518 题意:n个数,从中选出两个数,问这两个数的异或值大于两个数较大 ...

  8. Storyboard 经常用法总结－精华版

    1.prepareForSegue: Now we know what the destinationViewController is we can set its data properties. ...

  9. 解决NGINX的WORDPRESS伪静态规则失效的问题

    解决NGINX的WORDPRESS伪静态规则失效的问题 前两天搬到了EMSVPS的PR线路上,用上了最新的WDCP2.0管理面板,支持多用户管理(我们几个合租的VPS,最需要这个功能了),感觉很不错, ...

  10. Android真机网络adb联机调试初探

    新项目是一个基于android4.2设备.刚拿到demo板时就对联机互调感兴趣了.处于以前在S3c2440上对linux的移植使用经验.心里猜测对于android设备应该也这样.所以通过搜索资料整理如 ...