mirror of
https://github.com/TBEDP/datavjs.git
synced 2026-02-01 16:06:25 +00:00
Update
This commit is contained in:
Jackson Tian
commit
c3bef88771
@ -1,3 +1,4 @@
|
||||
<<<<<<< HEAD
|
||||
力引导布局网络图(Force)简介
|
||||
========================
|
||||
力引导布局网络图表现了不同数据元素之间的二元关系。
|
||||
@ -44,3 +45,45 @@ net.render();
|
||||
如上数据表示了三个节点Li,Wang,Zhang的信息，以及节点之间三条边的信息。每一行对应与一个节点或一条边。节点部分在前半部，Id代表节点编号，Name代表节点的相关信息；Group代表节点分组（可缺省，默认为1）。边部分在后半部，Source与Target代表边的两个节点，无向图中次序不限；Value代表边的值（可缺省，默认为1）。
|
||||
以上设置了绘制Force所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
=======
|
||||
#力引导布局网络图(Force)简介
|
||||
|
||||
力引导布局网络图表现了不同数据元素之间的二元关系。 绘制Force-directed网络图的javascript代码如下：
|
||||
```
|
||||
//创建Force对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。
|
||||
var net = new DataV.Force("chart"，{“width”: 700, “height”: 500});
|
||||
//设置net选项，边的目标长度为100。
|
||||
net.setOptions({“linkLength”: 100}); //options
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
net.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
net.render();
|
||||
```
|
||||
创建Force对象时，第一个参数是包含Force的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的宽和高。
|
||||
设置 Force选项时，可以设置如下属性：
|
||||
|
||||
- `width`: 画布宽度，默认500px
|
||||
- `height`: 画布高度，默认500px
|
||||
- `tag`: 是否有图例。默认true。
|
||||
- `forceValue`: 代表引力大小，默认为10.
|
||||
- `linkLength`: 代表边长度，默认50， 而一些边的长度在运动过程中会受到点之间作用力的影响而改变。
|
||||
- `classNum`: 对节点进行分组的数目。分组的依据是其节点值的大小，初始值为6。
|
||||
- `Iterate`: 在IE下不会显示开始载入的动态效果。Iterate代表经过多少个周期显示IE中的布局结果，初始值为100。
|
||||
|
||||
本组件的数据输入采用二维表格式。数据前半部分输入节点信息，后半部分输入边的信息。按照如下格式：
|
||||
```
|
||||
[
|
||||
[Id,Name,Value],
|
||||
[0,Li,0],
|
||||
[1,Wang,1],
|
||||
[2,Zhang,0],
|
||||
[Source,Target,Value],
|
||||
[0,1,1],
|
||||
[1,2,8],
|
||||
[2,0,3]
|
||||
]
|
||||
```
|
||||
如上数据表示了三个节点Li,Wang,Zhang的信息，以及节点之间三条边的信息。每一行对应与一个节点或一条边。节点部分在前半部，Id代表节点编号，Name代表节点的相关信息；Group代表节点分组（可缺省，默认为1）。边部分在后半部，Source与Target代表边的两个节点，无向图中次序不限；Value代表边的值（可缺省，默认为1）。
|
||||
以上设置了绘制Force所需的最重要的属性，调用render()就能完成绘制。
|
||||
交互包括：对节点的鼠标悬浮，点击与拖拽。对图例的点击。
|
||||
>>>>>>> 6c6c65cf03ce6168996c4ee18955ab8614990fe2
|
||||
|
||||
@ -1,36 +1,55 @@
|
||||
Stream图简介
|
||||
=====
|
||||
|
||||
Stream图通常用来展示多个变量随时间的变化趋势。每个变量用一条色带表示。色带的宽度代表了变量在某时间点处的值或占比的大小。 在DataV的Stream提供了自底向上排列，居中排列，扩展排列，平缓排列4种条带布局方式。鼠标移上条带时，可以高亮响应的条带，并在浮动框中显示相应变量在相应时间点处的值。 绘制Stream的javascript代码如下：
|
||||
|
||||
//创建stream对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。
|
||||
var stream = new DataV.Stream("chart"，{“width”: 700, “height”: 500});
|
||||
//设置 stream选项，排列方式为“zero”， 排列顺序为“reverse”。
|
||||
stream.setOptions({“offset”: “zero”, “order”: “reverse”}); //options
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
stream.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
stream.render();
|
||||
```javascript
|
||||
//创建stream对象，包含于id为"chart"的dom结点，宽、高分别为700、500px。
|
||||
var stream = new DataV.Stream("chart"，{"width": 700, "height": 500});
|
||||
//设置 stream选项，排列方式为"zero"， 排列顺序为"reverse"。
|
||||
stream.setOptions({"offset": "zero", "order": "reverse"}); //options
|
||||
//设置数据，输入的数据为一个二维数组。
|
||||
stream.setSource(source); //source is a 2-d array
|
||||
//绘制
|
||||
stream.render();
|
||||
```
|
||||
|
||||
创建stream对象时，第一个参数是包含stream的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的宽和高。
|
||||
创建stream对象时，第一个参数是包含stream的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的是宽和高。
|
||||
|
||||
设置 stream选项时，最重要的是offset和order。offset有4个选项：“zero”（从下往上堆叠），“silhouette”（纵向居中堆叠），“expand”（计算占比后堆叠），“wiggle”（前后两个时间点间的变化幅度最小，更平缓）。order有2个选项：“default”和“reverse”。“default”表示个变量以输入数据中的先后顺序从下往上排列；“reverse”表示顺序相反。
|
||||
设置 stream选项时，最重要的是offset和order。
|
||||
|
||||
offset有4个选项：
|
||||
|
||||
- "zero"（从下往上堆叠），
|
||||
- "silhouette"（纵向居中堆叠），
|
||||
- "expand"（计算占比后堆叠），
|
||||
- "wiggle"（前后两个时间点间的变化幅度最小，更平缓）。
|
||||
|
||||
order有2个选项：
|
||||
|
||||
- "default"表示个变量以输入数据中的先后顺序从下往上排列；
|
||||
- "reverse"表示顺序相反。
|
||||
|
||||
stream数据输入的格式为二维数组。例如下面的数组表示2个人在一年4个季度的消费。第一个人在4个季度里消费了1、2、3、9元。第二个人消费了3、4、6、3元。
|
||||
|
||||
```javascript
|
||||
[
|
||||
[1,2,3,9],
|
||||
[3,4,6,3]
|
||||
]
|
||||
```
|
||||
|
||||
数组中还可以在第一行和第一列加上列名和行名。下面的数据中加入了人名和季节。
|
||||
|
||||
```javascript
|
||||
[
|
||||
[“”, “season1”, “season2”, “season3”, “season4”],
|
||||
[“Wang”, 1, 2, 3, 9],
|
||||
[“Li”, 3, 4, 6, 3]
|
||||
["", "season1", "season2", "season3", "season4"],
|
||||
["Wang", 1, 2, 3, 9],
|
||||
["Li", 3, 4, 6, 3]
|
||||
]
|
||||
```
|
||||
|
||||
以上设置了绘制stream所需的最重要的属性，调用render()就能完成绘制。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,51 +1,56 @@
|
||||
treemap简介
|
||||
=====
|
||||
|
||||
treemap（树图）通常用来展示层次数据的占比关系。图中的每个矩形代表树的一个节点，大矩形中的小矩形代表父节点包含的子节点。不同的节点用不同的颜色加以区分，节点的值用矩形面积的大小表示。 在DataV的treemap中，一次只展现两层节点。第一层的节点用边界较宽的大矩形表示，其中边界较窄的小矩形代表第二层节点。第一层节点下的小矩形都采用同一类颜色，颜色的深浅代表节点的值的大小。点击第一层节点将把该节点下的两层节点放大显示。点击上方导航条中的链接可以回退到上一层节点。
|
||||
|
||||
绘制treemap的javascript代码如下：
|
||||
```javascript
|
||||
//创建treemap对象，包含于id为"chart"的dom结点，宽、高分别为700、500px。
|
||||
var treemap = new DataV.Treemap("chart", {"width": 700, "height": 500});
|
||||
//设置数据，输入的数据为一个二维数组，也可以为多层json数据。
|
||||
treemap.setSource(source); //source is a 2-d array or hierarchy json data
|
||||
//绘制
|
||||
treemap.render();
|
||||
```
|
||||
|
||||
//创建treemap对象，包含于id为”chart”的dom结点，宽、高分别为700、500px。
|
||||
var treemap = new DataV.Treemap("chart", {“width”: 700, “height”: 500});
|
||||
//设置数据，输入的数据为一个二维数组，也可以为多层json数据。
|
||||
treemap.setSource(source); //source is a 2-d array or hierarchy json data
|
||||
//绘制
|
||||
treemap.render();
|
||||
创建treemap对象时，第一个参数是包含treemap的dom结点或该结点的id，第二个参数是各种选项，其中最重要的宽和高。
|
||||
|
||||
创建treemap对象时，第一个参数是包含treemap的dom结点 或该结点的id， 第二个参数是各种选项，其中最重要的宽和高。
|
||||
|
||||
stream数据输入的格式可以是二维数组。例如下面的数组表示2000年4个季度的天数。第1季度下面还列出了1-3月的天数。数组的第一行为四个固定的字符串"ID"，"name"，"size"和"parentID"。四列数据分别表示层次数据集中各结点的ID，名称，大小和父节点ID。叶子节点必须有大小，根结点不能有父节点ID。各结点的ID、名称必须要有。
|
||||
treemap数据输入的格式可以是二维数组。例如下面的数组表示2000年4个季度的天数。第1季度下面还列出了1-3月的天数。数组的第一行为四个固定的字符串"ID"，"name"，"size"和"parentID"。四列数据分别表示层次数据集中各结点的ID，名称，大小和父节点ID。叶子节点必须有大小，根结点不能有父节点ID。各结点的ID、名称必须要有。
|
||||
|
||||
```javascript
|
||||
[
|
||||
|
||||
["ID", "name", "size", "parentID"],
|
||||
[0, “2000”, , ],
|
||||
[1, “season1”, , 0],
|
||||
[2, “January”, 31, 1],
|
||||
[3, “February”, 29, 1],
|
||||
[4, “Match”, 31, 1],
|
||||
[5, “season2”, 91, 0],
|
||||
[6, “season3”, 92, 0],
|
||||
[7, “season4”, 92, 0]
|
||||
[0, "2000", , ],
|
||||
[1, "season1", , 0],
|
||||
[2, "January", 31, 1],
|
||||
[3, "February", 29, 1],
|
||||
[4, "Match", 31, 1],
|
||||
[5, "season2", 91, 0],
|
||||
[6, "season3", 92, 0],
|
||||
[7, "season4", 92, 0]
|
||||
]
|
||||
```
|
||||
|
||||
数据还可以是json格式。每个结点都有“name”，如果是父节点则还有“children”，如果为叶节点则还有“size”。以上数组数据对应的json数据如下：
|
||||
|
||||
{
|
||||
"name": "2000",
|
||||
"children": [
|
||||
数据还可以是json格式。每个结点都有"name"，如果是父节点则还有"children"，如果为叶节点则还有"size"。以上数组数据对应的json数据如下：
|
||||
|
||||
```javascript
|
||||
{
|
||||
"name": "season1",
|
||||
"children": [
|
||||
{"name": "January", "size": 31},
|
||||
{"name": "February", "size": 29},
|
||||
{"name": "Match", "size": 31}
|
||||
]
|
||||
},
|
||||
{"name": "season2", "size": 91},
|
||||
{"name": "season3", "size": 92},
|
||||
{"name": "season4", "size": 92},
|
||||
]
|
||||
}
|
||||
"name": "2000",
|
||||
"children": [
|
||||
{
|
||||
"name": "season1",
|
||||
"children": [
|
||||
{"name": "January", "size": 31},
|
||||
{"name": "February", "size": 29},
|
||||
{"name": "Match", "size": 31}
|
||||
]
|
||||
},
|
||||
{"name": "season2", "size": 91},
|
||||
{"name": "season3", "size": 92},
|
||||
{"name": "season4", "size": 92},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
以上设置了绘制treemap所需的最重要的属性，调用render()就能完成绘制。
|
||||
|
||||
|
||||
@ -38,15 +38,16 @@
|
||||
var treemap = new Treemap("chart");
|
||||
d3.json("category_ratio.json", function (source) {
|
||||
treemap.setSource(source);
|
||||
$info = $("#info");
|
||||
treemap.setLeafNodeClick(function () {
|
||||
$info.html(this.name + " is a leaf node.");
|
||||
});
|
||||
var $hover = $("#hover");
|
||||
treemap.hover(function () {
|
||||
$hover.htm("hover " + this.name);
|
||||
}, function () {
|
||||
$hover.html("leave " + this.name);
|
||||
treemap.setOptions({
|
||||
"leafNodeClick": function () {
|
||||
$("#info").html(this.name + " is a leaf node.");
|
||||
},
|
||||
"hoverIn": function () {
|
||||
$("#hover").html("hover " + this.name);
|
||||
},
|
||||
"hoverOut": function () {
|
||||
$("#hover").html("leave " + this.name);
|
||||
}
|
||||
});
|
||||
treemap.render();
|
||||
});
|
||||
|
||||
@ -28,15 +28,16 @@
|
||||
var treemap = new Treemap("chart");
|
||||
d3.json("category_ratio.json", function (source) {
|
||||
treemap.setSource(source);
|
||||
$info = $("#info");
|
||||
treemap.setLeafNodeClick(function () {
|
||||
$info.html(this.name + " is a leaf node.");
|
||||
});
|
||||
var $hover = $("#hover");
|
||||
treemap.hover(function () {
|
||||
$hover.htm("hover " + this.name);
|
||||
}, function () {
|
||||
$hover.html("leave " + this.name);
|
||||
treemap.setOptions({
|
||||
"leafNodeClick": function () {
|
||||
$("#info").html(this.name + " is a leaf node.");
|
||||
},
|
||||
"hoverIn": function () {
|
||||
$("#hover").html("hover " + this.name);
|
||||
},
|
||||
"hoverOut": function () {
|
||||
$("#hover").html("leave " + this.name);
|
||||
}
|
||||
});
|
||||
treemap.render();
|
||||
});
|
||||
|
||||
@ -10,8 +10,12 @@
|
||||
}
|
||||
})('Chord', function (require) {
|
||||
var DataV = require('DataV');
|
||||
//构造函数，container参数表示在html的哪个容器中绘制该组件
|
||||
//options对象为用户自定义的组件的属性，比如画布大小
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param {Object} container 表示在html的哪个容器中绘制该组件
|
||||
* @param {Object} options 为用户自定义的组件的属性，比如画布大小
|
||||
*/
|
||||
var Chord = DataV.extend(DataV.Chart, {
|
||||
initialize: function (container, options) {
|
||||
this.type = "Chord";
|
||||
@ -42,6 +46,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
/*！
|
||||
* 检查容器
|
||||
* @param {Object} container HTML容器
|
||||
*/
|
||||
Chord.prototype.checkContainer = function (container) {
|
||||
if (!container) {
|
||||
throw new Error("Please specify which container to render.");
|
||||
@ -54,7 +62,10 @@
|
||||
throw new Error("Please specify which container to render.");
|
||||
};
|
||||
|
||||
//设置用户自定义属性
|
||||
/**
|
||||
* 设定用户自定义的属性
|
||||
* @param {Object} options 用户属性
|
||||
*/
|
||||
Chord.prototype.setOptions = function (options) {
|
||||
if (options) {
|
||||
var prop;
|
||||
@ -66,6 +77,9 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建画布
|
||||
*/
|
||||
Chord.prototype.createCanvas = function () {
|
||||
if (!this.container) {
|
||||
throw new Error("Please specify on which container to render the chart.");
|
||||
@ -80,11 +94,20 @@
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 获取颜色
|
||||
* @param {Number} i 元素类别编号
|
||||
* @return {String} 返回颜色值
|
||||
*/
|
||||
Chord.prototype.getColor = function (i) {
|
||||
var color = DataV.getColor();
|
||||
return color[i % color.length][0];
|
||||
};
|
||||
|
||||
/**
|
||||
* 绘制弦图
|
||||
*/
|
||||
Chord.prototype.render = function () {
|
||||
this.layout();
|
||||
if (this.defaults.tag) {
|
||||
@ -92,6 +115,9 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 绘制图例
|
||||
*/
|
||||
Chord.prototype.tag = function () {
|
||||
var that = this;
|
||||
var paper = this.canvas;
|
||||
@ -181,7 +207,10 @@
|
||||
});
|
||||
}
|
||||
|
||||
//对原始数据进行处理
|
||||
/**
|
||||
*对原始数据进行处理
|
||||
* @param {Array} table 将要被绘制成饼图的二维表数据
|
||||
*/
|
||||
Chord.prototype.setSource = function (table) {
|
||||
if (table[0][0] !== null) {
|
||||
var t;
|
||||
@ -214,7 +243,9 @@
|
||||
|
||||
};
|
||||
|
||||
//创建chord布局
|
||||
/**
|
||||
*创建chord布局
|
||||
*/
|
||||
Chord.prototype.layout = function () {
|
||||
var floatTag = this.floatTag;
|
||||
if (!this.container) {
|
||||
|
||||
@ -9,7 +9,11 @@
|
||||
}
|
||||
})('Force', function (require) {
|
||||
var DataV = require('DataV');
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param {Object} container 表示在html的哪个容器中绘制该组件
|
||||
* @param {Object} options 为用户自定义的组件的属性，比如画布大小
|
||||
*/
|
||||
var Force = DataV.extend(DataV.Chart, {
|
||||
initialize: function (container, options) {
|
||||
this.type = "Force";
|
||||
@ -52,7 +56,10 @@
|
||||
});
|
||||
|
||||
|
||||
//Strings in CSV to Numbers
|
||||
/*!
|
||||
*Strings in CSV to Numbers
|
||||
* @param {Number} value the value of the elemnts in csv table
|
||||
*/
|
||||
Force.prototype._toNum = function (value) {
|
||||
var type = typeof value;
|
||||
if (type === "number") {
|
||||
@ -64,7 +71,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
//Set CSV content to force-directed net
|
||||
/**
|
||||
*Set CSV content to force-directed net
|
||||
* @param {Array} table the csv table to be rendered
|
||||
*/
|
||||
Force.prototype.setSource = function (table) {
|
||||
//this.net = json;
|
||||
if (table[0][0] === "Id") {
|
||||
@ -125,12 +135,20 @@
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 创建画布
|
||||
*/
|
||||
Force.prototype.createCanvas = function () {
|
||||
var conf = this.defaults;
|
||||
this.canvas = new Raphael(this.container, conf.width, conf.height);
|
||||
//var c = this.canvas.circle(50, 50, 40);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取节点颜色
|
||||
* @param {Number} i 元素类别编号
|
||||
* @return {String} 返回颜色值
|
||||
*/
|
||||
Force.prototype.getColor = function (i) {
|
||||
var color = DataV.getColor(this.classNum);
|
||||
//var k = color.length * (i - this.nodeValueMin-0.1) / (this.nodeValueMax - this.nodeValueMin);
|
||||
@ -138,17 +156,29 @@
|
||||
return color[i % color.length][0];
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取节点的半径
|
||||
* @param {Number} value 元素对应的数据值
|
||||
* @return {Number} 返回半径值
|
||||
*/
|
||||
Force.prototype.getRadius = function (value) {
|
||||
var conf = this.defaults;
|
||||
return 16.0 * (value - this.nodeValueMin) / (this.nodeValueMax - this.nodeValueMin) + 8;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 获取节点透明度
|
||||
* @param {Number} value 元素类别编号
|
||||
* @return {Number} 返回透明度值
|
||||
*/
|
||||
Force.prototype.getOpacity = function (value) {
|
||||
return 0.083 * (value - this.linkValueMin) / (this.linkValueMax - this.linkValueMin) + 0.078;
|
||||
};
|
||||
|
||||
//update the layout by modify the attributes of nodes and links
|
||||
/**
|
||||
* update the layout by modify the attributes of nodes and links
|
||||
*/
|
||||
Force.prototype.update = function () {
|
||||
var that = this;
|
||||
var conf = this.defaults;
|
||||
@ -427,6 +457,9 @@
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 绘制图例
|
||||
*/
|
||||
Force.prototype.tag = function () {
|
||||
var that = this;
|
||||
var conf = this.defaults;
|
||||
@ -548,11 +581,17 @@
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* create the force-direct layout
|
||||
*/
|
||||
Force.prototype.layout = function () {
|
||||
var conf = this.defaults;
|
||||
this.force = d3.layout.force().linkDistance(conf.linkLength).size([conf.width + this.xOffset, conf.height]).theta(1.5);
|
||||
};
|
||||
|
||||
/**
|
||||
* update the force-direct layout animation
|
||||
*/
|
||||
Force.prototype.animate = function () {
|
||||
var conf = this.defaults;
|
||||
var nodes = this.nodes;
|
||||
@ -652,6 +691,10 @@
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 设定用户自定义的属性
|
||||
* @param {Object} options 用户属性
|
||||
*/
|
||||
Force.prototype.setOptions = function (options) {
|
||||
var prop;
|
||||
if (options) {
|
||||
@ -663,7 +706,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
//render the force-directed net on the canvas and keep updating
|
||||
/**
|
||||
*render the force-directed net on the canvas and keep updating
|
||||
* @param {Object} options user options
|
||||
*/
|
||||
Force.prototype.render = function (options) {
|
||||
if (!this.container) {
|
||||
throw new Error("Please specify which node to render.");
|
||||
|
||||
@ -13,9 +13,11 @@
|
||||
})('Pie', function (require) {
|
||||
var DataV = require('DataV');
|
||||
|
||||
|
||||
/**
|
||||
* 构造函数，container参数表示在html的哪个容器中绘制该组件
|
||||
* options对象为用户自定义的组件的属性，比如画布大小
|
||||
* 构造函数
|
||||
* @param {Object} container 表示在html的哪个容器中绘制该组件
|
||||
* @param {Object} options 为用户自定义的组件的属性，比如画布大小
|
||||
*/
|
||||
var Pie = DataV.extend(DataV.Chart, {
|
||||
initialize: function (container, options) {
|
||||
@ -50,6 +52,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 创建画布
|
||||
*/
|
||||
Pie.prototype.createCanvas = function () {
|
||||
this.canvas = new Raphael(this.node, this.defaults.width, this.defaults.height);
|
||||
var canvasStyle = this.node.style;
|
||||
@ -60,11 +65,20 @@
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取颜色
|
||||
* @param {Number} i 元素类别编号
|
||||
* @return {String} 返回颜色值
|
||||
*/
|
||||
Pie.prototype.getColor = function (i) {
|
||||
var color = DataV.getColor();
|
||||
return color[i % color.length][0];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 绘制饼图
|
||||
*/
|
||||
Pie.prototype.render = function () {
|
||||
var conf = this.defaults;
|
||||
var floatTag = this.floatTag;
|
||||
@ -79,10 +93,6 @@
|
||||
return d.endAngle;
|
||||
});
|
||||
|
||||
// var pathCalc = function (radius,start,end) {
|
||||
|
||||
// }
|
||||
|
||||
var donutEle;
|
||||
//获取每个环形的字符串表示
|
||||
var spline;
|
||||
@ -202,6 +212,9 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 绘制图例
|
||||
*/
|
||||
Pie.prototype.tag = function () {
|
||||
var that = this;
|
||||
var conf = this.defaults;
|
||||
@ -293,6 +306,7 @@
|
||||
|
||||
/**
|
||||
* 对原始数据进行处理
|
||||
* @param {Array} table 将要被绘制成饼图的二维表数据
|
||||
*/
|
||||
Pie.prototype.setSource = function (table) {
|
||||
if (table[0][0] !== null) {
|
||||
|
||||
@ -40,6 +40,12 @@
|
||||
this.defaults.showBackTag = true;
|
||||
this.defaults.backHeight = 20;
|
||||
this.defaults.width = 750;
|
||||
|
||||
//event
|
||||
this.defaults.leafNodeClick = function () {};
|
||||
this.defaults.hoverIn = function () {};
|
||||
this.defaults.hoverOut = function () {};
|
||||
|
||||
this.defaults.height = 500;
|
||||
this.setOptions(options);
|
||||
this.createCanvas();
|
||||
@ -616,17 +622,13 @@
|
||||
value : d.value
|
||||
};
|
||||
|
||||
if (this.leafNodeClick && d.parent && (!d.parent.parent) && (!d.children)) {
|
||||
jqNode.click(customEvent(this.leafNodeClick, o));
|
||||
if (d.parent && (!d.parent.parent) && (!d.children)) {
|
||||
jqNode.click(customEvent(this.defaults.leafNodeClick, o));
|
||||
}
|
||||
|
||||
if (this.hoverIn) {
|
||||
jqNode.mouseover(customEvent(this.hoverIn, o));
|
||||
}
|
||||
jqNode.mouseover(customEvent(this.defaults.hoverIn, o));
|
||||
|
||||
if (this.hoverOut) {
|
||||
jqNode.mouseout(customEvent(this.hoverOut, o));
|
||||
}
|
||||
jqNode.mouseout(customEvent(this.defaults.hoverOut, o));
|
||||
|
||||
//canvas.appendChild(jqNode[0]);
|
||||
}
|
||||
@ -682,21 +684,6 @@
|
||||
this.backTag.appendChild(p);
|
||||
};
|
||||
|
||||
/**
|
||||
* set user-defined node click handle
|
||||
*/
|
||||
Treemap.prototype.setLeafNodeClick = function (handler) {
|
||||
this.leafNodeClick = handler;
|
||||
};
|
||||
|
||||
/**
|
||||
* set user-defined node mouseover and mouseout handle
|
||||
*/
|
||||
Treemap.prototype.hover = function (fin, fout) {
|
||||
this.hoverIn = fin;
|
||||
this.hoverOut = fout;
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算布局，并重新渲染图表
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user