使用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. Android应用中使用百度地图API并加入标注（一）

    网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包       要在Android应用中使用百度地图API,就须要 ...

  2. UE4的编程C++创建一个FPSproject（两）角色网格、动画、HUD、子弹类

    立即归还,本文将总结所有这些整理UE4有关角色的网络格.动画.子弹类HUD一个简单的实现. (五)角色加入网格 Character类为我们默认创建了一个SkeletaMeshComponent组件,所 ...

  3. C#检查foreach为null判断

    1.foreach遍历列表或数组时,如果list或数组为null,就会报错,如下图: 2.不知道微软封装foreach的为什么不先检查要遍历的对象是否为null,这样就导致,我们在写代码时,遍历列表时 ...

  4. 开源免费跨平台opengl opencv webgl gtk blender, opengl贴图程序

    三维图形的这是opengl的强项,大型3D游戏都会把它作为首选.图像处理,是opencv的锁定的目标,大多都是C的api,也有少部分是C++的,工业图像表现,图像识别,都会考虑opencv的.webg ...

  5. clearcase 中一些概念和操作

    clearcase 中一些概念和操作 视图 常用命令 ClearCase 安装和使用的一些FAQ 参考 ClearCase具体的说是做配置管理的工具,只是SCM管理工具其中的一种.是RATIONAL公 ...

  6. 3xian退役贴【深思。】

    这是原文: 最后一天,漫天飘起了雪花,假装欢送我离去. 这次WF之战不太顺利,早期的C题大概花了1秒钟构思,然而由于输出格式多了一个空格直到两个半小时才逃脱Wrong Answer的纠缠.还好lynn ...

  7. myBatis 基础测试 表关联关系配置 集合 测试

    myBatis 基础测试 表关联关系配置 集合 测试 测试myelipse项目源码 sql 下载 http://download.csdn.net/detail/liangrui1988/599388 ...

  8. 使用函数指针和多态代替冗长的if-else或者switch-case

    在编程中,if-else和switch-case是很常见的分支结构,很少在程序中不用这些控制语句.但是不能否认,在一些场景下,由于分支结构过分长,导致代码不美观且不容易维护,在<重构>一书 ...

  9. XML序列化反序列化—常用类

    public class XMLSerializer    {        #region (public) xml序列化        /// <summary>        /// ...

  10. Advanced Data Structures

    Advanced Data Structures Advanced Data Structures