使用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. mfc对话框不能响应键盘消息

    这东西真是奇怪,找了半天原因,最终的发现却是让人抓狂,呵呵 现象:对话框按ESC或回车都不能关闭窗口(我没有处理PreTransplanteMessage),用spy++看,对话框完全收不到键盘消息 ...

  2. struts2官方演示程序总结struts2-blank

    struts-2.2.3.1-all\struts-2.2.3.1\apps\struts2-blank总结 1.Html可以访问action  ,如下:    < head  >     ...

  3. MySQL内存表(MEMORY)说明 | 一个PHP程序员的备忘录

    MySQL内存表(MEMORY)说明 | 一个PHP程序员的备忘录 MySQL内存表(MEMORY)说明

  4. 【iOS】iOS的iTunes文件共享，在程序Document路径

    有时候程序开发须要通过沙盒中的 documents目录与用户共享文件,iTunes默认是不支持iTunes file Sharing的,首先设置 info-list的Application suppo ...

  5. JOHN W. TUKEY: HIS LIFE AND PROFESSIONAL CONTRIBUTIONS

    DAVID R. BRILLINGER 写的关于John的一片纪念文章 JOHN W. TUKEY: HIS LIFE AND PROFESSIONAL CONTRIBUTIONS  (The Ann ...

  6. JAVA泛型之<? extends T>:(通配符上限)和<? super T>(通配符下限)

    一.通配符上限和通配符下限接受的类型 通配符上限:<? extends T> 通配符下限:<? super T> 以下代码是测试结果,注释为解释说明 package xayd. ...

  7. BI中事实表和维度表的定义

    一个典型的样例是,把逻辑业务比作一个立方体,产品维.时间维.地点维分别作为不同的坐标轴,而坐标轴的交点就是一个详细的事实.也就是说事实表是多个维度表的一个交点.而维度表是分析事实的一个窗体. 首先介绍 ...

  8. Android常用开源项目

    Android开源项目第一篇——个性化控件(View)篇   包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Progre ...

  9. Fluentd: Open Source Log Management

    Fluentd: Open Source Log Management "Fluentd" is an open-source tool to collect events and ...

  10. oracle乱码问题

    oracle乱码问题通常是因为oracle字符集设置和操作系统字符集设置不一致造成的,这里不得不提到两个操作系统环境变量,LANG和NLS_LANG LANG是针对Linux系统的语言.地区.字符集的 ...