使用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++ - Operator Precedence

    The following table lists the precedence and associativity of C++ operators. Operators are listed to ...

  2. PL/SQL批处理语句（BULK COLLECT子句和FORALL语句）

    Oracle为PL/SQL中的SQL相关功能提供了FORALL语句和BULK COLLECT子句,显著的增强了SQL相关功能.这两个语句一起被称作PL/SQL的批处理语句.Oracle为什么要提供这两 ...

  3. All consistent reads within the same transaction read the snapshot established by the first read.

    Session 1: Session 2: mysql> show variables like '%tx_isolation%'; +---------------+------------- ...

  4. 【IOS实例小计】图像移动--可扩展为动态实现图标变化

    预备知识: 1.页面切换: 从一个ViewController切换到另一个ViewController有下面几种方法: (1)self.view addSubview:(加载的新页面);      相 ...

  5. 执行Asp.net应用程序在Linux上的3种托管方式

    执行Asp.net应用程序在Linux上的3种托管方式 想要执行Asp.net应用程序在Linux上.我们有3种选择: 1.使用Apache作为Webserver.使用mod_mono:http:// ...

  6. 第m个全排列

    #include<stdio.h> #include<string.h> int flag,n,m; ],sum,vis[]; void dfs(int k) { ) retu ...

  7. 纠正一个概念：类就有VMT，各实例不过是共享这个VMT而已

    不是只有实例才有VMT,举个例子,各实例的VMT地址是相同的: Use System.Contnrs; procedure TForm1.BitBtn2Click(Sender: TObject); ...

  8. Linux下的softlink和hardlink（转）

    Linux中包括两种链接:硬链接(hard link)和软链接(soft link),软链接又称为符号链接(symbolic link) 创建命令:ln -s destfile/directory s ...

  9. hdu 1086（判断线段相交）

    传送门:You can Solve a Geometry Problem too 题意:给n条线段,判断相交的点数. 分析:判断线段相交模板题,快速排斥实验原理就是每条线段代表的向量和该线段的一个端点 ...

  10. 持续集成环境Jenkins的搭建和使用

    这几天试着搭了个持续集成环境,我使用的是Jenkins,它的前身是Hadson,由于被Oracle收购了,所以换个名字继续开源,这个有点像MySQL. 持续集成总是跟敏捷开发什么的搞在一起,显得非常高 ...