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来 ...
随机推荐
- 使用MAT(Memory Analyzer Tool)工具分析dump文件--转
原文地址:http://gao-xianglong.iteye.com/blog/2173140?utm_source=tuicool&utm_medium=referral 前言 生产环境中 ...
- （二）探究本质，WebGIS前端地图显示之地图比例尺换算原理
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.没有豆浆机怎么办? 喝豆浆是我们早晨中基本必备的一环,油条豆浆,其 ...
- DotNet指定文件显示的尺寸
在项目中开发中,有时候需要将文件的尺寸进行控制,例如需要将文件的尺寸指定为字节,TB等.现在提供一个方法,实现将指定文件的尺寸, 提供:"字节", "KB", ...
- JS控制的事件
鼠标点击弹出提示事件: <input type="button" value="鼠标点击弹出提示" onclick="DianJi()" ...
- jQuery-1.9.1源码分析系列（一）整体架构续
这一节主要是jQuery中最基础的几个东东 2. jQuery的几个基础属性和函数 a. jQuery.noConflict函数详解 在jQuery初始化的时候保存了外部的$和jQuery _j ...
- SQL Server里的文件和文件组
在今天的文章里,我想谈下SQL Server里非常重要的话题:SQL Server如何处理文件的文件组.当你用CREATE DATABASE命令创建一个简单的数据库时,SQL Server为你创建2个 ...
- Linux日志定时清理
linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...
- Moon.Orm性能报告
以下为有网友公司的评估测试及使用规范 大家可以下载word看看 http://pan.baidu.com/s/1hquvRuc 一.和ADO.NET进行的压力测试 说明:2000并发用户,此图为一网友 ...
- ros::spin() 和 ros::spinOnce() 区别及详解
版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5925381.html 博主提示:本文基于ROS Kinetic Kame,如有更(g ...
- Ionic2学习笔记（8）：Local Storage& SQLite
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html Ionic2可以有两种方式来存储数据,Local S ...