使用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. sql server 2005 外围应用配置器

    想要实现sql server 2005 远程连接数据库,我们必需要用到sql05上自带的外围配置器,以下是对它的一些配置上的介绍: 首先我们要打开sql05外围配置器,例如以下图: 打开后,我们如今就 ...

  2. spring获取bean 实例

    ApplicationContext ctx = new ClassPathXmlApplication("applicationContext.xml"); DataSource ...

  3. 适用函数ALSM_EXCEL_TO_INTERNAL_TABLE把excel文件传输到内表中

    FM:ALSM_EXCEL_TO_INTERNAL_TABLE 是上载Excel文件的一个函数,但是这个函数有两个限制. 一是每个CELL只能导入前50个字符,二是如果超过9999行,行号会初始化为从 ...

  4. FairScheduler的任务调度机制——assignTasks

    首先需要了解FairScheduler是如何在各个Pool之间分配资源,以及每个Pool如何在Job之间分配资源的.FairScheduler的分配资源发生在update()方法中,而该方法由一个线程 ...

  5. javascript （十三） 函数

    JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行 ...

  6. 让notepad.exe的utf8不添加BOM

    实在是厌烦了notepad的utf8模式了,于是决定修改之,方案如下: 使用任何支持hex模式的编辑器打开%SystemRoot%/system32/notepad.exe查找二进制串56 8D 45 ...

  7. WebBrowser脚本错误的完美解决方案

    原文:WebBrowser脚本错误的完美解决方案   当IE浏览器遇到脚本错误时浏览器,左下角会出现一个黄色图标,点击可以查看脚本错误的详细信息,并不会有弹出的错误信息框.当我们使用WebBrowse ...

  8. Jedi项目，还真得好好看看，有许多控件和新封装的API（Delphi里面没有）

    以前没有重视 http://www.delphi-jedi.org/ https://github.com/project-jedi https://sourceforge.net/projects/ ...

  9. DB2错误码解释对照

    表 2. SQLSTATE 类代码 类  代码    含义 要获得子代码,  参阅...  00 完全成功完成 表 3  01 警告 表 4  02 无数据 表 5  07 动态 SQL 错误 表 6 ...

  10. 《转》Linux下的多线程编程

    原地址:http://linux.chinaunix.net/doc/program/2001-08-11/642.shtml 1 引言 线程(thread)技术早在60年代就被提出,但真正应用多线程 ...