angularjs结合d3js实现资源展示
angularjs结合d3js实现资源展示
之前有用过d3js实现拓扑结构，这次需要调取一些kubernetes后台数据，发现angularjs已经能够注入d3来做这件事了，很开心啊
首先注入d3js
(function () {
'use strict';
angular.module('Myapp', []).directive("d3MinionBarGauge", ["d3DashboardService", function(e) {
return {
restrict: "E",
scope: {
data: "=",
thickness: "@",
graphWidth: "@",
graphHeight: "@"
},
link: function(t, a, n) {
var r = function(e) {
function n(e, a) {
return null === a || void 0 === a ? t.render(e) : s(a, e)
}
function r(e) {
var t = e.data
, a = c(t);
o(a, e.width, e.height)
}
function o(t, n, r) {
v = e.select(a[0]).append("svg").attr("width", "100%"),
b = e.select(a[0]).append("svg").attr("width", "100%");
var o = v.attr("class", "chart").attr("width", n).attr("height", r - 25).append("svg:g").attr("class", "concentricchart").attr("transform", "translate(" + n / 2 + "," + r / 4 + ")");
b.attr("class", "legend").attr("width", n);
y = Math.min(n, r) / 2;
var s = (b.append("text").attr("class", "hostName").attr("transform", "translate(" + (n - 120) / 2 + ",15)"),
b.append("svg:g").attr("class", "label_legend_area").attr("transform", "translate(" + (n - 215) / 2 + ",35)"));
s.append("svg:g").attr("class", "legend_group"),
s.append("svg:g").attr("class", "label_group").attr("transform", "translate(25,11)"),
s.append("svg:g").attr("class", "stats_group").attr("transform", "translate(115,11)"),
o.append("svg:g").attr("class", "path_group").attr("transform", "translate(0," + r / 4 + ")"),
o.append("svg:g").attr("class", "value_group").attr("transform", "translate(" + -(.205 * n) + "," + -(.1 * r) + ")");
l(o, t)
}
function s(e, t) {
if (void 0 !== t && null !== t) {
var a = jQuery.extend(!0, {}, t)
, n = jQuery.extend(!0, {}, e)
, r = c(a);
k = c(n),
i(r)
}
}
function i(e) {
l(null , e)
}
function c(e) {
var t = (2 * Math.PI * y,
[]);
return $.each(e[0].segments, function(t, a) {
function n(e) {
var t = 200;
e > t && (e = t);
var a = e
, n = a / t
, r = 4 * n * Math.PI
, o = r
, s = 2 * Math.PI
, i = s + o;
return {
startAngle: s,
endAngle: i
}
}
var r = n(a.value);
e[0].segments[t].startAngle = r.startAngle,
e[0].segments[t].endAngle = r.endAngle;
var o = a.maxData
, s = n(o.maxValue + .2);
e[0].segments[t].maxTickStartAngle = s.startAngle,
e[0].segments[t].maxTickEndAngle = s.endAngle;
var i = n(o.maxValue);
e[0].segments[t].maxArcStartAngle = i.startAngle,
e[0].segments[t].maxArcEndAngle = i.endAngle,
e[0].segments[t].index = t
}),
t.push(e[0].segments),
t[0]
}
function l(e, a) {
var n = v
, r = 750;
$.each(a, function(e, t) {
void 0 !== k[e] ? a[e].previousEndAngle = k[e].endAngle : a[e].previousEndAngle = 0
});
var o = parseInt(t.thickness, 10)
, s = parseInt(t.graphWidth, 10) / 3
, i = v.select(".path_group")
, c = i.selectAll(".arc_group").data(a)
, l = c.enter().append("g").attr("class", "arc_group");
l.append("path").attr("class", "bg-circle").attr("d", h(o, s)),
l.append("path").attr("class", function(e, t) {
return "max_tick_arc " + e.maxData.maxTickClassNames
}),
l.append("path").attr("class", function(e, t) {
return "max_bg_arc " + e.maxData.maxClassNames
}),
l.append("path").attr("class", function(e, t) {
return "value_arc " + e.classNames
});
var f = c.select(".max_tick_arc");
f.transition().attr("class", function(e, t) {
return "max_tick_arc " + e.maxData.maxTickClassNames
}).attr("d", function(e) {
var t = d(o, s);
return t.startAngle(e.maxTickStartAngle),
t.endAngle(e.maxTickEndAngle),
t(e)
});
var g = c.select(".max_bg_arc");
g.transition().attr("class", function(e, t) {
return "max_bg_arc " + e.maxData.maxClassNames
}).attr("d", function(e) {
var t = d(o, s);
return t.startAngle(e.maxArcStartAngle),
t.endAngle(e.maxArcEndAngle),
t(e)
});
var b = c.select(".value_arc");
b.transition().ease("exp").attr("class", function(e, t) {
return "value_arc " + e.classNames
}).duration(r).attrTween("d", function(e) {
return u(e, o, s)
}),
c.exit().select(".value_arc").transition().ease("exp").duration(r).attrTween("d", function(e) {
return u(e, o, s)
}).remove(),
p(n, a, s, o),
m(n, a)
}
function u(t, a, n) {
var r = JSON.parse(JSON.stringify(t));
r.endAngle = t.previousEndAngle;
var o = e.interpolate(r, t);
return function(e) {
return g(a, n)(o(e))
}
}
function d(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
});
return n
}
function p(e, t, a, n) {
v.select(".value_group").selectAll("*").remove();
var r = (t.length,
e.select(".value_group"))
, o = r.selectAll("text.value").data(t);
o.enter().append("svg:text").attr("class", "value").attr("dx", function(e, t) {
return 68
}).attr("dy", function(e, t) {
return (n + 3) * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.value
}),
o.transition().duration(300).attrTween("d", function(e) {
return u(e, n, a)
}),
o.exit().remove()
}
function m(e, t) {
var a = b;
a.select(".label_group").selectAll("*").remove(),
a.select(".legend_group").selectAll("*").remove(),
a.select(".stats_group").selectAll("*").remove();
var n = a.select(".hostName")
, r = a.select(".label_group")
, o = a.select(".stats_group");
n.text(t[0].hostName),
n = a.selectAll("text.hostName").data(t),
n.attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.hostName
}),
n.exit().remove();
var s = r.selectAll("text.labels").data(t);
s.enter().append("svg:text").attr("class", "labels").attr("dy", function(e, t) {
return 19 * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.label
}),
s.exit().remove();
var i = o.selectAll("text.stats").data(t);
i.enter().append("svg:text").attr("class", "stats").attr("dy", function(e, t) {
return 19 * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.stats
}),
i.exit().remove();
var c = a.select(".legend_group")
, l = c.selectAll("rect").data(t);
l.enter().append("svg:rect").attr("x", 2).attr("y", function(e, t) {
return 19 * t
}).attr("width", 13).attr("height", 13).attr("class", function(e, t) {
return "rect " + e.classNames
}),
l.exit().remove()
}
function f(e, t) {
return e - 20 * t
}
function g(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
}).startAngle(function(e, t) {
return e.startAngle
}).endAngle(function(e, t) {
return e.endAngle
});
return n
}
function h(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
}).startAngle(0).endAngle(function() {
return 2 * Math.PI
});
return n
}
var v = e.select("svg.chart")
, b = e.select("svg.legend");
window.onresize = function() {
return t.$apply()
}
,
t.$watch(function() {
return angular.element(window)[0].innerWidth
}, function() {
return t.render(t.data)
}),
t.$watch("data", function(e, t) {
return n(e, t)
}, !0);
var y = 100
, k = [];
t.render = function(n) {
if (void 0 !== n && null !== n) {
e.select(a[0]).select("svg.chart").remove(),
e.select(a[0]).select("svg.legend").remove();
var o = ($(a[0]),
t.graphWidth)
, s = t.graphHeight
, i = {
data: n,
width: o,
height: s
};
r(i)
}
}
}
;
e.d3().then(r)
}
}
}
]);
angular.module("Dashboard").factory("d3DashboardService", ["$document", "$q", "$rootScope", function(e, t, a) {
function n() {
a.$apply(function() {
r.resolve(window.d3)
})
}
var r = t.defer()
, o = e[0].createElement("script");
o.type = "text/javascript",
o.async = !0,
o.src = "http://d3js.org/d3.v3.min.js",
//o.src = "/bower_components/d3/d3.min.js",
//o.src = "https://d3js.org/d3.v4.min.js",
o.onreadystatechange = function() {
"complete" == this.readyState && n()
}
,
o.onload = n;
var s = e[0].getElementsByTagName("body")[0];
return s.appendChild(o),
{
d3: function() {
return r.promise
}
}
}]);
})();
然后建几个数据，在controller中
(function() {
'use strict';
angular.module('Dashboard').controller('adminQuotaListCtrl', adminQuotaListCtrl);
/** @ngInject */
function adminQuotaListCtrl($scope, $http, $timeout) {
$scope.minions = ['test1'];
$scope.activeMinionDataById = {};
$scope.activeMinionDataById['test1'] =
[
{ segments:
[
{
label: "CPU",
stats: "4% / 2 CPU",
value: "4",
classNames: "color-1",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-1"
},
hostName: "test1"
},
{
label: "Memory",
stats: "2.25 GB / 3.98 GB",
value: "56",
classNames: "color-2",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-2"
},
hostName: "test1"
},
{
label: "Filesystem #1",
stats: "160.16 GB / 214.74 GB",
value: "74",
classNames: "color-3",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-3"
},
hostName: "test1"
}
]
}
];
}
})();
然后写html
<div class="dashboard">
<div class=" server-overview">
<div class="row">
<div flex-sm="100" flex-md="50" flex-lg="33" flex-gt-lg="25" class="chart_area ng-scope col-md-12" ng-repeat="minion in minions">
<d3-minion-bar-gauge data="activeMinionDataById[minion]" class="concentric ng-isolate-scope" graph-width="325" graph-height="325" thickness="18">
</d3-minion-bar-gauge>
</div>
<div>
</div>
</div>
css也不能少
.dashboard .server-overview .color-1 {
background-color: #512DA8;
border-color: #512DA8;
fill: #512DA8;
stroke: #512DA8
}
.dashboard .server-overview .color-2 {
background-color: #9C27B0;
border-color: #9C27B0;
fill: #9C27B0;
stroke: #9C27B0
}
.dashboard .server-overview .color-3 {
background-color: #00BCD4;
border-color: #00BCD4;
fill: #00BCD4;
stroke: #00BCD4
}
.dashboard .server-overview .color-max-1 {
background-color: #b6a2e6;
border-color: #b6a2e6;
fill: #b6a2e6
}
.dashboard .server-overview .color-max-2 {
background-color: #dfa0ea;
border-color: #dfa0ea;
fill: #dfa0ea
}
.dashboard .server-overview .color-max-3 {
background-color: #87f1ff;
border-color: #87f1ff;
fill: #87f1ff
}
.dashboard .server-overview .max_tick_arc {
stroke: #FFF!important
}
.dashboard .server-overview .concentricchart .bg-circle {
background: #F9F9F9;
fill: #F9F9F9;
stroke: #FFF;
stroke-width: 1px
}
.dashboard .server-overview .concentricchart text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview .concentricchart .value_group {
fill: #fff
}
.dashboard .server-overview .concentricchart .legend_group rect {
opacity: .8
}
.dashboard .server-overview svg.legend {
height: auto
}
.dashboard .server-overview svg.legend text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview svg.legend .hostName {
font-size: 16px
}
.dashboard .server-overview .minion-name {
text-align: center;
vertical-align: bottom;
width: 100%
}
.dashboard .server-overview .chart_area {
width: 325px;
height: auto
}
.dashboard .server-overview .concentricchart .bg-circle {
background: #F9F9F9;
fill: #F9F9F9;
stroke: #FFF;
stroke-width: 1px
}
.dashboard .server-overview .concentricchart text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview .concentricchart .value_group {
fill: #fff
}
.dashboard .server-overview .concentricchart .legend_group rect {
opacity: .8
}
来看看效果：
angularjs结合d3js实现资源展示的更多相关文章
- 有关AngularJS请求Web API资源的思路
页面部分大致如下: <body ng-app="productManagement"> ... <div ng-include="'app/produc ...
- 【起航计划 023】2015 起航计划 Android APIDemo的魔鬼步伐 22 App->Menu->Inflate from XML 使用xml资源展示菜单
本例MenuInflateFromXml.java演示了如何从Menu 资源(XML 定义)展开菜单项.这个例子的onCreate 采用了使用代码来创建Activity 界面的方法 而通常的方法是采用 ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- 【JavaScript】 2013年度最强AngularJS资源合集
http://www.iteye.com/news/28651-AngularJS-Google-resource AngularJS是Google开源的一款JavaScript MVC框架,弥补了H ...
- 最强AngularJS资源合集
AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来 ...
- 黄聪：AngularJS中的$resource使用与Restful资源交互（转）
原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...
- METEOR 及ANGULARJS
最近学习:METEOR 及ANGULARJS,收藏相关资源: 1.METEOR 中文书:http://zh.discovermeteor.com/ 2.METEOR 及ANGULARJS 联合开发:h ...
- AngularJS 整理资料
AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来 ...
- AngularJS合集
AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来 ...
随机推荐
- 读《linux内核完全注释》的FAQ
以下只是个人看了<linux内核完全注释>的一点理解,如果有错误,欢迎指正! 1 eip中保存的地址是逻辑地址.线性地址还是物理地址? 这个应该要分情况.eip保存的是下一条要执行的指令地 ...
- No zuo no die：DDD 应对具体业务场景，Domain Model 重新设计
写在前面 上联:no zuo no die why you try 下联:no try no high give me five 横批: let it go上联:no zuo no die why y ...
- 自己在总结前人经验下弄的几个opencv封装函数
第一个是增加对比度的函数,就是变亮. IplImage* EqualizeHistColorImage(IplImage *pImage) { IplImage *pEquaImage = cvCre ...
- java 中多线程的同步函数的运用
/* * 需求: * 银行有一个金库 * 有两个储户,分别存300元.每次存100 , 存三次 * * 这个是有线程问题的, * * 我们应该通过下边的三个方法来查找问题 * 1.明确哪些代码是多线程 ...
- C++基础知识
基础知识 &&和||具有"短路"特性,特别是在第二个操作数有++或--时要注意. 显式类型转换 (类型说明符)表达式 //C风格的 类型说明符(表达式) //cpp ...
- SDN/NFV若干问题
1.首先谈一谈网络技术和组网技术的关系 网络可分为两层:业务网.承载网.业务网主要是组织业务系统,而承载网主要是用来传输信息流:包括传送网(点到点数据专线).数据网(端到端连接).内容分发网(点到多点 ...
- js修改不了input的值
奇怪的input 今天想做一个通过点击按钮,修改input值的控件,但是点击按钮后,input值变成修改的值后又变回了原来的值,百思不得其解,代码如下 <form> <div cla ...
- 【十大经典数据挖掘算法】CART
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 前言 分类与回归树(Class ...
- webapi文档描述-swagger
最近做的项目使用mvc+webapi,采取前后端分离的方式,后台提供API接口给前端开发人员.这个过程中遇到一个问题后台开发人员怎么提供接口说明文档给前端开发人员,最初打算使用word文档方式进行交流 ...
- Xenocode Postbuild 2010 for .NET 使用说明
文章转载自网络 用法一: .导入要加密的dotNET程序或assembly文件(.dll/.exe) .选择第二个选项卡“Protect” .点击“Select Pattern” .选中所有“Obje ...