From 7757eaa88d0d921d2b81620e89550342eec8a40f Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 11 Sep 2013 14:44:33 +0800 Subject: [PATCH 01/18] add level chart. Chinese map has been set in ./example/chinamap Signed-off-by: hlqf --- example/level/level_shu.html | 54 ++++++++++++ lib/charts/level.js | 157 +++++++++++++++++++++++++++++++++++ 2 files changed, 211 insertions(+) create mode 100644 example/level/level_shu.html create mode 100644 lib/charts/level.js diff --git a/example/level/level_shu.html b/example/level/level_shu.html new file mode 100644 index 00000000..30d39974 --- /dev/null +++ b/example/level/level_shu.html @@ -0,0 +1,54 @@ + + + + + + Document + + + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/lib/charts/level.js b/lib/charts/level.js new file mode 100644 index 00000000..3e44cde1 --- /dev/null +++ b/lib/charts/level.js @@ -0,0 +1,157 @@ +/*! + * datavjs - lib/charts/level.js + * + * 层级图 + * + * Copyright(c) 2013 hlqf + * MIT Licensed + */ +(function (name, def) { + if (typeof define === 'function') { + define(def); + } else { + this[name] = def(function (id) { + return this[id]; + }); + } +})('LevelChart', function (require) { + var DataV = require('DataV'); + + //init level chart,set default params + var LevelChart = DataV.extend(DataV.Chart, { + initialize: function (node, options) { + this.type = 'LevelChart'; + this.node = this.checkContainer(node); + + this.defaults.labels = [ '低', '偏低', '中', '偏高', '高' ]; + + this.setOptions(options); + } + }); + + function drawGridConsume (r, x, y, w, h, wv, hv, color, options) { + color = color || "#999999"; + var path = []; + var rowHeight = h / hv, + columnWidth = w / wv; + for (var i = 0; i < hv; i++) { + if (i === hv - 1) { + r.path(["M", Math.round(x) - 0.5, Math.round(y + i * rowHeight) - 0.5, "H", Math.round(x + w) + 0.5]).attr({'stroke-width': 1, 'stroke': '#999999'}); + continue; + } + path = path.concat(["M", Math.round(x) + 0.5, Math.round(y + i * rowHeight) + 0.5, "H", Math.round(x + w) + 0.5]); + } + for (i = 0; i < wv; i++) { + path = path.concat(["M", Math.round(x + i * columnWidth) + 0.5, Math.round(y) + 0.5, "V", Math.round(y + h) + 0.5]); + } + if ((!options || !options.tipImg) && (!options || !options.nobase)) { + r.image('http://img03.taobaocdn.com/tps/i3/T1aS6GXhFgXXcm5wzo-77-19.png', x + w - 80, 0, 77, 19); + } else if (!!options.tipImg) { + r.image(options.tipImg, x + w - 80, 0, 77, 19); + } + return r.path(path.join(",")).attr({ stroke: color, opacity: 0.7, 'stroke-width': 1}); + } + + LevelChart.prototype.render = function (data, options) { + + if (options && options.labels) { + var labels = options.labels; + } else { + var labels = this.defaults.labels; + } + // var labesl = options.labels ? options.labels : this.defaults.labels; + var nobase = options && options.nobase; + var nopercent = options && options.nopercent; + + var $node = $(this.node); + var width = $node.width(); + var height = $node.height(); + var leftGutter = 10; + var bottomGutter = 5; + var topGutter = 20; + var padding = 10; + + var r = Raphael($node[0], width, height); + var localMax = Math.max.apply(Math, data); + var globalMax = options && options.max || localMax || 100; + var globalBase = options && options.globalBase || [8, 17, 50, 17, 8]; + + if (!nobase && globalMax < 50) { + globalMax = 50; + } + + drawGridConsume(r, 0, topGutter + 0.5, width, height - topGutter - bottomGutter, 0, 6, '#cccbbb', options); + + var globalBasePlot = []; + + var columnWidth = Math.floor(width / labels.length) - leftGutter - padding; + var columnHeight = Math.floor(height - topGutter - bottomGutter); + + for (var i = 0; i < data.length; i++) { + // 计算依赖的值 + var x = Math.floor((columnWidth + leftGutter + padding) * i) + 10; + var dwidth = columnWidth; + // 与全局最高值之间做变换 + var dheight = Math.ceil((columnHeight - 18) * (data[i] / globalMax)) * 0.75; + var y = columnHeight * 6 / 7 - dheight + topGutter - 6; + var attr = {'font-family': 'Arial', 'font-size': 12, 'fill': '#666666'}; + var value = data[i]; + + // 画坐标轴 + r.text(x + columnWidth / 2, height - topGutter, labels[i]).attr(attr); + // 画柱状 + var rect = r.rect(x, y, dwidth, dheight); + var unit = ''; + if (!nopercent) { + unit = '%'; + } + var text = r.text(x + columnWidth / 2, y - 10, value + unit); + rect.attr({fill: '#3fa9f5', 'stroke': '#3fa9f5', 'opacity': 0.7}); + attr['font-size'] = 14; + text.attr(attr); + rect.indexI = i; + if (!nobase) { + // hover效果 + rect.hover(function () { + this.attr({'opacity': 1.0}); + var maxLen = labels.length - 1; + var x = globalBasePlot[this.indexI][0] + columnWidth; + //处理最右侧的元素 + x = this.indexI === maxLen ? x - columnWidth * 2 - 7 : x; + var y = globalBasePlot[this.indexI][1] - 10; + this.tooltipImage = r.image('http://img01.taobaocdn.com/tps/i1/T15H_GXiJjXXc.LCDe-40-21.gif', x, y, 40, 21); + if (this.indexI === maxLen) { + this.tooltipImage.rotate(180); + x -= maxLen; + } + this.tooltipText = r.text(x + 23, y + 11, globalBase[this.indexI] + '%').attr({'fill': '#fff', 'font-size': 12}); + }, function () { + this.attr({'opacity': 0.7}); + if (this.tooltipImage) { + this.tooltipImage.remove(); + } + if (this.tooltipText) { + this.tooltipText.remove(); + } + }); + // 计算全网基数坐标 + globalBasePlot[i] = [x, columnHeight * 6 / 7 + - (Math.ceil((columnHeight - 18) * (globalBase[i] / globalMax)) * 0.75) + topGutter - 6, + x + columnWidth , columnHeight * 6 / 7 + - (Math.ceil((columnHeight - 18) * (globalBase[i] / globalMax)) * 0.75) + topGutter - 6]; + } + } + if (!nobase) { + // 画全网基数线 + var globalBasePath = []; + for (var i = 1; i < globalBasePlot.length; i++) { + globalBasePath.push('M' + globalBasePlot[i - 1].join(' ') + 'L' + globalBasePlot[i].join(' ')); + } + r.path(globalBasePath.join(",")).attr({'stroke': '#999999'}); + } + + }; + + return LevelChart; + +}); \ No newline at end of file From 45d2dd69ce43eeca1008bcf2ed9aa75249c1134c Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 11 Sep 2013 14:49:21 +0800 Subject: [PATCH 02/18] add example image for level chart --- doc/assets/level.jpg | Bin 0 -> 13294 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 doc/assets/level.jpg diff --git a/doc/assets/level.jpg b/doc/assets/level.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4ecc02788f71a1b940a7204f67438f3a6b887870 GIT binary patch literal 13294 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 literal 0 HcmV?d00001 From 647f4ed91073cb4fa67ce7532e66161a114f3e68 Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 11 Sep 2013 14:50:54 +0800 Subject: [PATCH 03/18] add level chart example image --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index eb9fca20..45cd8213 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,9 @@ $ git clone git://github.com/TBEDP/datavjs.git ![Chord图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/chord.jpg) - [Gender 性别图](https://github.com/TBEDP/datavjs/tree/master/example/gender) ![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png) +- [Level 层级图](https://github.com/TBEDP/datavjs/tree/master/example/level) +![Gender](https://raw.github.com/TBEDP/datavjs/master/doc/assets/level.jpg) + ## Quick start 此处以Pie图为例。 From e8ed13bc410231439b6be2e549b59a7216594f0e Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 11 Sep 2013 15:03:46 +0800 Subject: [PATCH 04/18] add chinese map chart and its example in README.md Signed-off-by: hlqf --- README.md | 4 +++- doc/assets/chinesemap.jpg | Bin 0 -> 32127 bytes 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 doc/assets/chinesemap.jpg diff --git a/README.md b/README.md index 45cd8213..5f91d456 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,9 @@ $ git clone git://github.com/TBEDP/datavjs.git - [Gender 性别图](https://github.com/TBEDP/datavjs/tree/master/example/gender) ![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png) - [Level 层级图](https://github.com/TBEDP/datavjs/tree/master/example/level) -![Gender](https://raw.github.com/TBEDP/datavjs/master/doc/assets/level.jpg) +![Level](https://raw.github.com/TBEDP/datavjs/master/doc/assets/level.jpg) +- [ChineseMap图](https://github.com/TBEDP/datavjs/tree/master/example/chinamap/chinamap_city_without_seajs.html) +![Level](https://raw.github.com/TBEDP/datavjs/master/doc/assets/chinesemap.jpg) ## Quick start diff --git a/doc/assets/chinesemap.jpg b/doc/assets/chinesemap.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d3643a811e4b34139d847021be007515d9f231ae GIT binary patch literal 32127 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 Date: Wed, 11 Sep 2013 15:06:17 +0800 Subject: [PATCH 05/18] update url of images --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5f91d456..bb2f9697 100644 --- a/README.md +++ b/README.md @@ -42,9 +42,9 @@ $ git clone git://github.com/TBEDP/datavjs.git - [Gender 性别图](https://github.com/TBEDP/datavjs/tree/master/example/gender) ![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png) - [Level 层级图](https://github.com/TBEDP/datavjs/tree/master/example/level) -![Level](https://raw.github.com/TBEDP/datavjs/master/doc/assets/level.jpg) -- [ChineseMap图](https://github.com/TBEDP/datavjs/tree/master/example/chinamap/chinamap_city_without_seajs.html) -![Level](https://raw.github.com/TBEDP/datavjs/master/doc/assets/chinesemap.jpg) +![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level.jpg) +- [ChineseMap图](https://github.com/TBEDP/datavjs/tree/master/example/chinamap) +![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) ## Quick start From 390a2673283b2c3a7e999eebcab437461f5b824b Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 11 Sep 2013 15:34:19 +0800 Subject: [PATCH 06/18] update a describe error --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb2f9697..84d63298 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ $ git clone git://github.com/TBEDP/datavjs.git - [Level 层级图](https://github.com/TBEDP/datavjs/tree/master/example/level) ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level.jpg) - [ChineseMap图](https://github.com/TBEDP/datavjs/tree/master/example/chinamap) -![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) +![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) ## Quick start From dedaf6a572742a2aefcb346957a5a8620d8243eb Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 17 Sep 2013 11:28:57 +0800 Subject: [PATCH 07/18] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B1=82=E7=BA=A7?= =?UTF-8?q?=E5=9B=BE=E5=88=86=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/level/level_shu.html | 20 ++++++++++ lib/charts/level.js | 74 +++++++++++++++++++++++++++++++++--- 2 files changed, 89 insertions(+), 5 deletions(-) diff --git a/example/level/level_shu.html b/example/level/level_shu.html index 30d39974..8bbe9c2a 100644 --- a/example/level/level_shu.html +++ b/example/level/level_shu.html @@ -16,6 +16,17 @@ overflow: hidden; float: left; } + .level2 { + padding: 10px; + margin: 10px; + height: 235px; + width: 500px; + overflow: hidden; + float: left; + } + .clr { + clear: both; + } @@ -24,6 +35,8 @@
+
+
\ No newline at end of file diff --git a/lib/charts/level.js b/lib/charts/level.js index 3e44cde1..b9a3d73f 100644 --- a/lib/charts/level.js +++ b/lib/charts/level.js @@ -24,14 +24,17 @@ this.node = this.checkContainer(node); this.defaults.labels = [ '低', '偏低', '中', '偏高', '高' ]; + this.defaults.width = 235; + this.defaults.height = 200; this.setOptions(options); } }); - function drawGridConsume (r, x, y, w, h, wv, hv, color, options) { + LevelChart.prototype.drawGridConsume = function (r, x, y, w, h, wv, hv, color, options) { color = color || "#999999"; var path = []; + var conf = this.defaults; var rowHeight = h / hv, columnWidth = w / wv; for (var i = 0; i < hv; i++) { @@ -52,6 +55,11 @@ return r.path(path.join(",")).attr({ stroke: color, opacity: 0.7, 'stroke-width': 1}); } + LevelChart.prototype.createCanvas = function () { + var conf = this.defaults; + this.canvas = new Raphael(this.node, conf.width, conf.height); + }; + LevelChart.prototype.render = function (data, options) { if (options && options.labels) { @@ -63,9 +71,10 @@ var nobase = options && options.nobase; var nopercent = options && options.nopercent; + var conf = this.defaults; var $node = $(this.node); - var width = $node.width(); - var height = $node.height(); + var width = conf.width; + var height = conf.height; var leftGutter = 10; var bottomGutter = 5; var topGutter = 20; @@ -80,14 +89,67 @@ globalMax = 50; } - drawGridConsume(r, 0, topGutter + 0.5, width, height - topGutter - bottomGutter, 0, 6, '#cccbbb', options); + this.drawGridConsume(r, 0, topGutter + 0.5, width, height - topGutter - bottomGutter, 0, 6, '#cccbbb', options); var globalBasePlot = []; var columnWidth = Math.floor(width / labels.length) - leftGutter - padding; var columnHeight = Math.floor(height - topGutter - bottomGutter); - for (var i = 0; i < data.length; i++) { + //判断是否需要分条 + var is2dFlag = 0; + for (var x = 0; x < data.length; x++) { + if (Object.prototype.toString.call(data[x]) === '[object Array]') { + is2dFlag = 1; + } + } + + if (is2dFlag === 1){ + var x = []; + var y = []; + var globalMax = 100; + var tmpMax = []; + + for (var n in data) { + //获得多维数据中的最大值 + for (var i = 0; i < data[n].length; i++) { + tmpMax.push(Math.max.apply(Math, data[n])); + } + globalMax = Math.max.apply(Math, tmpMax); + + var color = []; + for (var i = 0; i < data[n].length; i++) { + var k = i + n * data[n].length; + var dwidth = columnWidth / data.length; + + x.push(Math.floor((columnWidth + leftGutter + padding) * i) + 10 + dwidth * n); + var dheight = Math.ceil((columnHeight - 18) * (data[n][i] / globalMax)) * 0.75; + y.push(columnHeight * 6 / 7 - dheight + topGutter - 5.5); + var attr = {'font-family': 'Arial', 'font-size': 12, 'fill': '#666666'}; + var value = data[n][i]; + + r.text(x[i] + columnWidth / 2, height - topGutter, labels[i]).attr(attr); + var rect = r.rect(x[k], y[k], dwidth, dheight); + + var unit = ''; + if (!nopercent) { + unit = '%'; + } + + var text = r.text(x[k] + columnWidth / 4, y[k] - 10, value + unit).attr({'font-size': 10}); + if (n <= 2) { + color = ['#3fa9f5','#ff89a3']; + } else { + var c = 'rgb(300, 200, ' + n * 100 + ')'; + console.log(color); + color.push(c); + } + + rect.attr({'fill': color[n], 'stroke': color[n], 'opacity': 0.7}); + } + } + } else { + for (var i = 0; i < data.length; i++) { // 计算依赖的值 var x = Math.floor((columnWidth + leftGutter + padding) * i) + 10; var dwidth = columnWidth; @@ -141,6 +203,8 @@ - (Math.ceil((columnHeight - 18) * (globalBase[i] / globalMax)) * 0.75) + topGutter - 6]; } } + } + if (!nobase) { // 画全网基数线 var globalBasePath = []; From c61ea438af8f15047d9fb865c93926f9c4a8c52e Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 17 Sep 2013 17:17:58 +0800 Subject: [PATCH 08/18] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E7=94=BB?= =?UTF-8?q?=E5=B8=83=E5=88=9D=E5=A7=8B=E5=8C=96=E6=96=B9=E5=BC=8F,=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=9A=E6=9D=A1=E6=9F=B1=E5=9B=BE=E6=97=B6?= =?UTF-8?q?=E7=9A=84hover=E6=95=88=E6=9E=9C,=20=E4=BF=AE=E6=94=B9=E5=A4=9A?= =?UTF-8?q?=E6=9D=A1=E6=97=B6=E7=9A=84=E5=9F=BA=E7=BA=BF=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BB=A5=E4=BD=BF=E8=A1=A8=E7=8E=B0=E6=9B=B4=E5=8A=A0=E6=B8=85?= =?UTF-8?q?=E6=99=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/level/level_shu.html | 2 +- lib/charts/level.js | 59 +++++++++++++++++++++++++++++++----- 2 files changed, 53 insertions(+), 8 deletions(-) diff --git a/example/level/level_shu.html b/example/level/level_shu.html index 8bbe9c2a..c5dedafb 100644 --- a/example/level/level_shu.html +++ b/example/level/level_shu.html @@ -67,7 +67,7 @@ "width": 400, "height": 235, }); - tester.render([[ 10, 35, 88, 49, 10 ],[ 15, 45, 78, 40, 10 ]]); + tester.render([[ 10, 35, 88, 49, 10 ],[ 15, 45, 78, 40, 10 ]], { globalBase : [[ 10, 20, 70, 30, 5 ], [ 10, 35, 70, 40, 15 ]]}); diff --git a/lib/charts/level.js b/lib/charts/level.js index b9a3d73f..975f877b 100644 --- a/lib/charts/level.js +++ b/lib/charts/level.js @@ -83,7 +83,7 @@ var r = Raphael($node[0], width, height); var localMax = Math.max.apply(Math, data); var globalMax = options && options.max || localMax || 100; - var globalBase = options && options.globalBase || [8, 17, 50, 17, 8]; + var globalBase = options && options.globalBase || [8, 17, 50, 17, 10]; if (!nobase && globalMax < 50) { globalMax = 50; @@ -104,19 +104,23 @@ } } - if (is2dFlag === 1){ + if (is2dFlag === 1){ //当出现多维同柱对比时 var x = []; var y = []; - var globalMax = 100; var tmpMax = []; + // 重赋多维基数默认值 + globalBase = Object.prototype.toString.call(globalBase) === '[object Array]' ? globalBase : [[ 10, 20, 30, 10, 15 ], [ 15, 28, 40, 20, 20 ]]; + var globalMax; for (var n in data) { //获得多维数据中的最大值 for (var i = 0; i < data[n].length; i++) { tmpMax.push(Math.max.apply(Math, data[n])); } globalMax = Math.max.apply(Math, tmpMax); + } + for (var n in data) { var color = []; for (var i = 0; i < data[n].length; i++) { var k = i + n * data[n].length; @@ -141,14 +145,48 @@ color = ['#3fa9f5','#ff89a3']; } else { var c = 'rgb(300, 200, ' + n * 100 + ')'; - console.log(color); color.push(c); } rect.attr({'fill': color[n], 'stroke': color[n], 'opacity': 0.7}); + + rect.indexI = i; + rect.indexN = n; + if (!nobase) { + // hover效果 + rect.hover(function () { + var li = this.indexI + this.indexN * labels.length; //标记在globalBase中当前柱状坐标的下标 + this.attr({'opacity': 1.0}); + var maxLen = labels.length - 1; + var x = globalBasePlot[this.indexI][0] + columnWidth; + //处理最右侧的元素 + x = this.indexI === maxLen ? x - columnWidth * 2 - 7 : x; + var y = globalBasePlot[li][1] - 10; + this.tooltipImage = r.image('http://img01.taobaocdn.com/tps/i1/T15H_GXiJjXXc.LCDe-40-21.gif', x, y, 40, 21); + if (this.indexI === maxLen) { + this.tooltipImage.rotate(180); + x -= maxLen; + } + this.tooltipText = r.text(x + 23, y + 11, globalBase[this.indexN][this.indexI] + '%').attr({'fill': '#fff', 'font-size': 12}); + }, function () { + this.attr({'opacity': 0.7}); + if (this.tooltipImage) { + this.tooltipImage.remove(); + } + if (this.tooltipText) { + this.tooltipText.remove(); + } + }); + + // 计算全网基数坐标 + globalBasePlot[k] = [x[k], columnHeight * 6 / 7 + - (Math.ceil((columnHeight - 18) * (globalBase[n][i] / globalMax)) * 0.75) + topGutter - 6, + x[k] + columnWidth / 2 , columnHeight * 6 / 7 + - (Math.ceil((columnHeight - 18) * (globalBase[n][i] / globalMax)) * 0.75) + topGutter - 6]; + } } } - } else { + } else { //当为单条时 for (var i = 0; i < data.length; i++) { // 计算依赖的值 var x = Math.floor((columnWidth + leftGutter + padding) * i) + 10; @@ -205,13 +243,20 @@ } } - if (!nobase) { - // 画全网基数线 + if (!nobase && is2dFlag === 0) { + // 画全网基数线,单维时 var globalBasePath = []; for (var i = 1; i < globalBasePlot.length; i++) { globalBasePath.push('M' + globalBasePlot[i - 1].join(' ') + 'L' + globalBasePlot[i].join(' ')); } r.path(globalBasePath.join(",")).attr({'stroke': '#999999'}); + } else { + //多维时的全网基线之间不相连接,只画在柱状上 + var globalBasePath = []; + for (var i = 1; i < globalBasePlot.length + 1; i++) { + globalBasePath.push('M' + globalBasePlot[i - 1].join(' ')); + } + r.path(globalBasePath.join(",")).attr({'stroke': '#999999', 'stroke-dasharray': '-', 'stroke-width': 2}); } }; From 8965728da4e85bb885d9b21801f4fdc4ad8b0640 Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 17 Sep 2013 17:45:03 +0800 Subject: [PATCH 09/18] update README.md for emphasizing differences with original Master --- README.md | 40 ++++++++-------------------------------- 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 84d63298..7e7e5c23 100644 --- a/README.md +++ b/README.md @@ -9,41 +9,17 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 - [API文档](http://tbedp.github.com/datavjs/index.html) - 任意疑问，请移至底下联系人部分即可。 -## 安装 -目前处于开发中，并未release正式版本，如需使用，请采用如下方式： +## 说明 +此版本只演示与TEDP主版本有区别或新增的内容,如需查看原始主版本,请至 [DataV.js on Github](https://github.com/TBEDP/datavjs) . -```bash -$ git clone git://github.com/TBEDP/datavjs.git -``` - -需要注意的是 [example](https://github.com/TBEDP/datavjs/tree/master/example) 目录下的例子中有 `ajax` 存在，所以你需要一个服务器来托管这些静态文件。 - -你也可以试用基于 DataV.js 开发的 [Chrome插件](https://chrome.google.com/webstore/detail/datavjs/fkekhkndcgobgjbkclehjognobgdoppm)，可以在任意网页中将表格可视化。 - -## Examples -- [Pie](http://datavlab.org/datavjs/#pie) -![Pie图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/pie.jpg) -- [Treemap](http://datavlab.org/datavjs/#treemap) -![Treemap图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/treemap.jpg) -- [Tree](http://datavlab.org/datavjs/#tree) -![Tree图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/tree.jpg) -- [Stream](http://datavlab.org/datavjs/#stream) -![Stream图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/stream.jpg) -- [ScatterplotMatrix](http://datavlab.org/datavjs/#scatterplotMatrix) -![ScatterplotMatrix图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/scatterplotMatrix.jpg) -- [Force](http://datavlab.org/datavjs/#force) -![Force图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/force.jpg) -- [Matrix](http://datavlab.org/datavjs/#matrix) -![Matrix图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/matrix.jpg) -- [Bubble](http://datavlab.org/datavjs/#bubble) -![Bubble图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/bubble.jpg) -- [Chord](http://datavlab.org/datavjs/#chord) -![Chord图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/chord.jpg) -- [Gender 性别图](https://github.com/TBEDP/datavjs/tree/master/example/gender) +## New Examples +- [Gender 性别图](https://github.com/hlqf/datavjs/tree/master/example/gender) ![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png) -- [Level 层级图](https://github.com/TBEDP/datavjs/tree/master/example/level) +- [Level 层级图](https://github.com/hlqf/datavjs/tree/master/example/level) ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level.jpg) -- [ChineseMap图](https://github.com/TBEDP/datavjs/tree/master/example/chinamap) +- [Level 多元素层级图](https://github.com/hlqf/datavjs/tree/master/example/level) +![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level_duo.jpg) +- [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) From 02704e6e50dcae3f7154cf3180bdcc90a4f4385b Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 17 Sep 2013 17:46:08 +0800 Subject: [PATCH 10/18] add level_duo.jpg image example --- doc/assets/level_duo.jpg | Bin 0 -> 16759 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 doc/assets/level_duo.jpg diff --git a/doc/assets/level_duo.jpg b/doc/assets/level_duo.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0c30f30dbf84f03569e838db2bb6b4c46781c46f GIT binary patch literal 16759 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 z Date: Mon, 23 Sep 2013 16:35:10 +0800 Subject: [PATCH 11/18] add tiflevel chart for Chart-Selector. --- README.md | 106 +------------ doc/assets/tiflevel.jpg | Bin 0 -> 7484 bytes example/tiflevel/tiflevel.html | 64 ++++++++ lib/charts/tiflevel.js | 263 +++++++++++++++++++++++++++++++++ 4 files changed, 330 insertions(+), 103 deletions(-) create mode 100644 doc/assets/tiflevel.jpg create mode 100644 example/tiflevel/tiflevel.html create mode 100644 lib/charts/tiflevel.js diff --git a/README.md b/README.md index 7e7e5c23..dec36e41 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,6 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 ![DataV logo](https://raw.github.com/TBEDP/datavjs/master/doc/assets/logo.png) - [API文档](http://tbedp.github.com/datavjs/index.html) -- 任意疑问，请移至底下联系人部分即可。 ## 说明 此版本只演示与TEDP主版本有区别或新增的内容,如需查看原始主版本,请至 [DataV.js on Github](https://github.com/TBEDP/datavjs) . @@ -21,105 +20,6 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level_duo.jpg) - [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) - - -## Quick start -此处以Pie图为例。 - -### 引入依赖 - -```html - - -``` - -### 准备数据 - -```js -var source = [ - ['北京', 50265], - ['上海', 60555], - ['广州', 38544], - ['深圳', 27276], - ['西安', 20506], - ['昆明', 26916], - ['武汉', 17636], - ['拉萨', 977], - ['哈尔滨', 10406], - ['乌鲁木齐', 6695] -]; -``` - -### 渲染图表 - -```js -// 初始化组件 -var pie = new Pie("container", {width: 1000, tag: true}); -// 添加数据源 -pie.setSource(source); -// 渲染 -pie.render(); -``` - -### 结果： - -![Pie图](https://raw.github.com/TBEDP/datavjs/master/doc/assets/pie.jpg) - -## Requirements: -* [D3.js](https://github.com/mbostock/d3). -* [Raphael.js](http://raphaeljs.com/). -* [Sea.js](https://github.com/seajs/seajs). - -## Learn more? -- The example site: -- [API Docs](http://tbedp.github.com/datavjs/) - -## Contributors -Thanks goes to the people who have contributed code to this library, see the [GitHub Contributors](https://github.com/TBEDP/datavjs/graphs/contributors) page. - -Below is the output from `git-summary` - -```bash -$ git summary - - project : datavjs - repo age : 1 year - active : 159 days - commits : 431 - files : 276 - authors : - 305 Jackson Tian 70.8% - 46 jdk137 10.7% - 25 xie cong 5.8% - 18 gozo1234 4.2% - 11 Theseue 2.6% - 8 xiecong 1.9% - 8 wxtheseue 1.9% - 4 Jiang Dongke 0.9% - 3 郭方舟 0.7% - 2 unknown 0.5% - 1 arcthur 0.2% -``` - -## License - -DataV.js is available under the [MIT License](https://github.com/TBEDP/datavjs/blob/master/MIT-License). - -## Contact - -组件由淘宝数据产品部可视化小组以及浙大CAD&CG可视化与可视分析小组共同开发 -开发联系人，有问题可咨询： - -- 阿里旺旺 - - 朴灵[![朴灵 在线咨询](http://amos1.taobao.com/online.ww?v=2&uid=%E6%9C%B4%E7%81%B5&s=1)](http://amos1.taobao.com/msg.ww?v=2&uid=%E6%9C%B4%E7%81%B5&s=1) - - 宁朗[![宁朗 在线咨询](http://amos1.taobao.com/online.ww?v=2&uid=%E5%AE%81%E6%9C%97&s=1)](http://amos1.taobao.com/msg.ww?v=2&uid=%E5%AE%81%E6%9C%97&s=1) - - 法慧[![法慧 在线咨询](http://amos1.taobao.com/online.ww?v=2&uid=%E6%B3%95%E6%85%A7&s=1)](http://amos1.taobao.com/msg.ww?v=2&uid=%E6%B3%95%E6%85%A7&s=1) - - 解聪(浙大实习生)[![解聪 在线咨询](http://amos1.taobao.com/online.ww?v=2&uid=%E9%95%BF%E4%BA%AD%E7%9A%84%E8%8B%8F%E5%B9%95%E9%81%AE&s=1)](http://amos1.taobao.com/msg.ww?v=2&uid=%E9%95%BF%E4%BA%AD%E7%9A%84%E8%8B%8F%E5%B9%95%E9%81%AE&s=1) - - 黄芯芯(浙大实习生)[![黄芯芯 在线咨询](http://amos1.taobao.com/online.ww?v=2&uid=littlemonkey007&s=1)](http://amos1.taobao.com/msg.ww?v=2&uid=littlemonkey007&s=1) -- 阿里旺旺群：76480715 -- QQ群: 18164936 -- Google Group: [DataVLab](http://groups.google.com/group/datavlab) -- Gtalk: -- 浙大CAD&CG可视化与可视分析小组: [VAG Wiki](http://www.cad.zju.edu.cn/home/vagwiki/index.php) - -如有疑问，或发现Bug，也可[提交Bug](https://github.com/TBEDP/datavjs/issues/new) +- [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) +![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) +图表选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 diff --git a/doc/assets/tiflevel.jpg b/doc/assets/tiflevel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ab853d689482efdab7bcfb6be17524f6604ea220 GIT binary patch literal 7484 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 XszNXQ%o`s5JEf5E->8p|_VK>}XdGr& literal 0 HcmV?d00001 diff --git a/example/tiflevel/tiflevel.html b/example/tiflevel/tiflevel.html new file mode 100644 index 00000000..c067e565 --- /dev/null +++ b/example/tiflevel/tiflevel.html @@ -0,0 +1,64 @@ + + + + + + Document + + + + + + +
+
+ + + \ No newline at end of file diff --git a/lib/charts/tiflevel.js b/lib/charts/tiflevel.js new file mode 100644 index 00000000..1f2d877f --- /dev/null +++ b/lib/charts/tiflevel.js @@ -0,0 +1,263 @@ +/** +* TifLevel for DataV.js +* +*/ + +var TifBuyerLevel = function (config) { + this.config = config; + // 4 params must need + var width = config.width || 320, + height = config.height || 190; + var container = typeof config.container === "string" ? document.getElementById(config.container) : config.container; // id or dom node + var data = config.data || [{name: "18", value: 40}, {name: "25", value: 60}]; + + // other optional params + var margin = config.margin || { + "top": 1, + "left": 1, + "bottom": 1, + "right": 1 + }; + var highlightColor = config.highlightColor || '#3391d4'; + var clickHandle = config.clickHandle || function (d, i) { + //console.log(d.name); + }; + var color = this.color = typeof data[0].color !== 'undefined' ? + data.map(function (d) { return d.color; }) : + d3.range(data.length).map(function () { return "#3fa9f5"; }); + var levelSpacing = config.levelSpacing || 20; // distance between first level words and bar, distance between first level word and second level word + var wordBox = config.wordBox || {w: 50, h: 30}; // bar word (includs name and ratio) box's width + var level2Shift = config.level2Shift || -10; + var showBox = config.showBox || false; + + var titleDefaultStyle = config.titleDefaultStyle || { + 'cursor': 'pointer', + 'border': 'solid 1px #fff', + 'display': 'inline-block', + 'border-radius': 3, + 'padding': 1 + }; + + var wordDefaultStyle = config.wordDefaultStyle || { + "font-size": "12px", + "font-family": "微软雅黑" + }; + + var w = width - margin.left - margin.right; + var h = height - margin.top - margin.bottom; + + // data process; + var notNullCount = 0; + data.forEach(function (d) { + d.isNull = (d.value === null); + d.v = (d.isNull ? 0 : d.value); + if (!d.isNull) { + notNullCount += 1; + } + }); + var all = data.every(function (d) { + return !d.isNull; + }); + var sum = d3.sum(data, function (d) { return d.v; }); + var ratioArr = this.ratioArr = data.map(function (d) { + if (d.isNull) { + d.ratio = 0; + } else { + d.ratio = sum === 0 ? (1 / notNullCount) : (d.v / sum); + } + return d.ratio; + }); + var wArr = this.wArr = data.map(function (d) { + return (w - data.length + 1) * d.ratio; + }); + var s = margin.left; + var leftArr = this.leftArr = wArr.map(function (d, i) { + s += wArr[i] + 1; // 1 is spacing between different bars; + return s - wArr[i] - 1; + }); + + //compute linkLine and word box left position + var shakeLevel = function (boundL, boundR, initArr, boxWidth) { + var wordBoxLeft = []; + var right = boundL; + var left = boundR; + //left to right + initArr.forEach(function (d, i) { + if (d >= right) { + wordBoxLeft[i] = d; + } else { + wordBoxLeft[i] = right; + } + right = wordBoxLeft[i] + boxWidth; + }); + if (right < boundR) { + return wordBoxLeft; + } + wordBoxLeft.reverse(); + wordBoxLeft.forEach(function (d, i) { + if (d + boxWidth < left) { + wordBoxLeft[i] = d; + } else { + wordBoxLeft[i] = left - boxWidth; + } + left = wordBoxLeft[i]; + }); + + wordBoxLeft.reverse(); + return wordBoxLeft; + }; + var oddBoxLeft = leftArr.filter(function (d, i) { + return i % 2 === 0; + }); + var evenBoxLeft = leftArr.filter(function (d, i) { + return i % 2 === 1; + }); + var linePos = []; + var boxPos = []; + // get first level box left position + oddBoxLeft = shakeLevel(margin.left, margin.left + w, oddBoxLeft, wordBox.w); + // get second level line position + evenBoxLeft.forEach(function (d, i) { + // last item and total data number is even; + if (i === evenBoxLeft.length - 1 && (leftArr.length % 2 === 0)) { + if (oddBoxLeft[i] + wordBox.w < d) { + } else { + evenBoxLeft[i] = oddBoxLeft[i] + wordBox.w + level2Shift; + } + return; + } + if (oddBoxLeft[i] + wordBox.w < d && oddBoxLeft[i + 1] >= d + wordBox.w) { + } else { + evenBoxLeft[i] = (oddBoxLeft[i] + wordBox.w + oddBoxLeft[i + 1]) / 2 + level2Shift; + } + }); + // get linePos + oddBoxLeft.forEach(function (d, i) { + linePos.push(d); + if (typeof evenBoxLeft[i] !== 'undefined') { + linePos.push(evenBoxLeft[i]); + } + }); + // get second level box left position + evenBoxLeft = shakeLevel(margin.left, margin.left + w, evenBoxLeft, wordBox.w); + // get boxPos + oddBoxLeft.forEach(function (d, i) { + boxPos.push(d); + if (typeof evenBoxLeft[i] !== 'undefined') { + boxPos.push(evenBoxLeft[i]); + } + }); + + //draw bar + var paper = this.paper = new Raphael(container, width, height); + var rects = this.rects = paper.set(); + data.forEach(function (d, i) { + var rect = paper.rect(leftArr[i], margin.top, wArr[i], h) + .attr({ + "r": 3, + "fill": color[i], + 'cursor': 'pointer', + "stroke": "none" + }); + rects.push(rect); + }); + + //draw test box and line + //line + var linkLines = this.linkLines = paper.set(); + var words = this.words = []; + linePos.forEach(function (d, i) { + var path = "M" + leftArr[i] + "," + (margin.top + h) + + " C" + leftArr[i] + "," + (margin.top + h + levelSpacing / 2) + + " " + d + "," + (margin.top + h + levelSpacing / 2) + + " " + d + "," + (margin.top + h + levelSpacing); + if (i % 2 === 1) { + path += "v" + (wordBox.h + levelSpacing / 2); + } + var line = paper.path(path).attr({ + "stroke-dasharray": ". " + }); + linkLines.push(line); + }); + // draw box + if (showBox) { + boxPos.forEach(function (d, i) { + var box = paper.rect( + d, //x + margin.top + h + levelSpacing + (i % 2 === 0 ? 0 : wordBox.h + levelSpacing / 2), //y + wordBox.w, //w + wordBox.h //h + ); + }); + } + + var titles = []; + $(container).css('position', 'relative'); + data.forEach(function (d, i) { + var wordSet = $("
"); + words.push(wordSet); + var title = $('
' + d.name + '
').css(titleDefaultStyle); + if (!all && !data[i].isNull) { + title.css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + titles.push(title); + wordSet.append(title); + if (!d.isNull) { + var value = $('
' + (Math.round(ratioArr[i] * 1000) / 10 + "%") + '
').css("color", color[i]); + wordSet.append(value); + } + wordSet.css(wordDefaultStyle).css({ + 'position': 'absolute', + 'left': boxPos[i], + 'top': margin.top + h + levelSpacing + (i % 2 === 0 ? 0 : wordBox.h + levelSpacing / 2) + }); + $(container).append(wordSet); + }); + + //interaction + //hover + var getHoverIn = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + }; + }; + var getHoverOut = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px #fff', + 'background-color': '#fff' + }); + } + }; + }; + //click + var getClick = function (i) { + var index = i; + return function () { + clickHandle(data[index], index); + }; + }; + data.forEach(function (d, i) { + var hoverIn = getHoverIn(i); + var hoverOut = getHoverOut(i); + var click = getClick(i); + rects[i].hover(hoverIn, hoverOut); + rects[i].click(click); + titles[i].on("mouseenter", hoverIn); + titles[i].on("mouseleave", hoverOut); + titles[i].on("click", click); + }); +}; From ba8d303c19b187cc9460c910fc71365f7ecdf677 Mon Sep 17 00:00:00 2001 From: hlqf Date: Mon, 23 Sep 2013 16:39:27 +0800 Subject: [PATCH 12/18] update README.md for better typesetting --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index dec36e41..1941eda0 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,14 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 此版本只演示与TEDP主版本有区别或新增的内容,如需查看原始主版本,请至 [DataV.js on Github](https://github.com/TBEDP/datavjs) . ## New Examples -- [Gender 性别图](https://github.com/hlqf/datavjs/tree/master/example/gender) +- [Gender 性别图](https://github.com/hlqf/datavjs/tree/master/example/gender) ![Gender](http://nfs.nodeblog.org/d/3/d317bbffe6cc085b63c653e02d4d5373.png) -- [Level 层级图](https://github.com/hlqf/datavjs/tree/master/example/level) +- [Level 层级图](https://github.com/hlqf/datavjs/tree/master/example/level) ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level.jpg) -- [Level 多元素层级图](https://github.com/hlqf/datavjs/tree/master/example/level) +- [Level 多元素层级图](https://github.com/hlqf/datavjs/tree/master/example/level) ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level_duo.jpg) -- [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) +- [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) -- [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) +- [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) ![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) 图表选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 From 354276dca93bb7ceae993ea4d1d3c6528e366d43 Mon Sep 17 00:00:00 2001 From: hlqf Date: Mon, 23 Sep 2013 16:41:37 +0800 Subject: [PATCH 13/18] update README.md for better typesetting --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1941eda0..77cbf8b0 100644 --- a/README.md +++ b/README.md @@ -21,5 +21,5 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 - [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) - [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) -![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) +![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) 图表选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 From 9ff41ac0bca32b15253f7b088b181d06b5bb0505 Mon Sep 17 00:00:00 2001 From: hlqf Date: Mon, 23 Sep 2013 16:43:26 +0800 Subject: [PATCH 14/18] the same --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 77cbf8b0..6e91bb35 100644 --- a/README.md +++ b/README.md @@ -21,5 +21,6 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 - [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) - [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) -![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) +![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) + 图表选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 From 1ca5a1adfacd61951ef05da00098515e2ce7d389 Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 24 Sep 2013 10:31:45 +0800 Subject: [PATCH 15/18] Add barLevelSelector --- README.md | 8 +- doc/assets/tifbarlevel.jpg | Bin 0 -> 9280 bytes example/tifbarlevel/tifbarlevel.html | 31 +++++ lib/charts/tifbarlevel.js | 172 +++++++++++++++++++++++++++ 4 files changed, 208 insertions(+), 3 deletions(-) create mode 100644 doc/assets/tifbarlevel.jpg create mode 100644 example/tifbarlevel/tifbarlevel.html create mode 100644 lib/charts/tifbarlevel.js diff --git a/README.md b/README.md index 6e91bb35..e8e26936 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,9 @@ DataV.js 是一个 JavaScript 的数据可视化库，致力于推动数据可 ![Level](https://raw.github.com/hlqf/datavjs/master/doc/assets/level_duo.jpg) - [ChineseMap图](https://github.com/hlqf/datavjs/tree/master/example/chinamap) ![ChineseMap](https://raw.github.com/hlqf/datavjs/master/doc/assets/chinesemap.jpg) -- [图表选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) +- [分层选择器](https://github.com/hlqf/datavjs/tree/master/example/tiflevel) ![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tiflevel.jpg) - -图表选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 +- [柱状选择器](https://github.com/hlqf/datavjs/tree/master/example/tifbarlevel) +![TifLevel](https://raw.github.com/hlqf/datavjs/master/doc/assets/tifbarlevel.jpg) + +选择器用于既需要显示数据间的相关占比关系又需要合并或拆分查询条件的业务场景。 diff --git a/doc/assets/tifbarlevel.jpg b/doc/assets/tifbarlevel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2fa629788e9b928bd8d3b7659c7b462659ef4132 GIT binary patch literal 9280 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 + + + + Demo + + + + + +
+ + + \ No newline at end of file diff --git a/lib/charts/tifbarlevel.js b/lib/charts/tifbarlevel.js new file mode 100644 index 00000000..87e4ea10 --- /dev/null +++ b/lib/charts/tifbarlevel.js @@ -0,0 +1,172 @@ +/** +* TifBarLevel +*/ +var TifBarLevel = function (config) { + // 4 params must need + var width = config.width || 320, + height = config.height || 190; + var container = typeof config.container === "string" ? document.getElementById(config.container) : config.container; // id or dom node + var data = config.data || [{name: "18", value: 40}, {name: "25", value: 60}]; + + // other optional params + var nullWidth = config.nullWidth || 2; + var nullColor = config.nullColor || 'gray'; + var highlightColor = config.highlightColor || '#3391d4'; + var clickHandle = config.clickHandle || function (d, i) { + //console.log(d.name); + }; + var margin = config.margin || { + "top": 1, + "left": 1, + "bottom": 1, + "right": 1 + }; + var color = this.color = typeof data[0].color !== 'undefined' ? + data.map(function (d) { return d.color; }) : + d3.range(data.length).map(function () { return "#3fa9f5"; }); + var wordSpacing = config.wordSpacing || 10; // distance between word and bar + + var titleDefaultStyle = config.titleDefaultStyle || { + 'cursor': 'pointer', + 'border': 'solid 1px #fff', + 'display': 'inline-block', + 'border-radius': 3, + "font-family": "微软雅黑", + "font-size": "12px", + 'padding': 1 + }; + + var w = width - margin.left - margin.right; + var h = height - margin.top - margin.bottom; + var barH = h / data.length; + + // data process; + var notNullCount = 0; + data.forEach(function (d) { + d.isNull = (d.value === null); + d.v = (d.isNull ? 0 : d.value); + if (!d.isNull) { + notNullCount += 1; + } + }); + var all = data.every(function (d) { + return !d.isNull; + }); + var sum = d3.sum(data, function (d) { return d.v; }); + var max = d3.max(data, function (d) { return d.v; }); + var ratioArr = this.ratioArr = data.map(function (d) { + if (d.isNull) { + d.ratio = 0; + } else { + d.ratio = sum === 0 ? 0 : (d.v / sum); + } + return d.ratio; + }); + var wArr = this.wArr = data.map(function (d) { + return max === 0 ? nullWidth : (w - nullWidth) * d.value / max + nullWidth; + }); + + //draw bar + $(container).css("position", "relative"); + var paper = this.paper = new Raphael(container, width, height); + var rects = this.rects = paper.set(); + data.forEach(function (d, i) { + var rect = paper.rect(margin.left, margin.top + barH * i, wArr[i], barH) + .attr({ + "r": 3, + "cursor": "pointer", + "fill": d.isNull ? nullColor : color[i], + "stroke-width": 1, + "stroke": "#fff" + }); + rects.push(rect); + }); + + // draw words + var ratioWord = this.ratioWord = paper.set(); + var titles = this.titles = []; + //var nameWord = this.nameWord = paper.set(); + //var nameBackground = this.nameBackground = paper.set(); + ratioArr.forEach(function (d, i) { + if (data[i].isNull) { + return; + } + var text = paper.text( + margin.left + wArr[i] + wordSpacing, //x + margin.top + barH * (i + 0.5), //y + Math.round(d * 1000) / 10 + "%" //text string + ).attr({ + "text-anchor": "start", + "fill": color[i] + }); + ratioWord.push(text); + }); + ratioWord.attr({ + "font-size": "14px" + }); + + data.forEach(function (d, i) { + var title = $('
' + d.name + '
').css(titleDefaultStyle); + if (!all && !d.isNull) { + title.css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + title.appendTo($(container)); + var tw = title.width(); + var th = title.outerHeight(); + title.css({ + 'position': 'absolute', + 'left': margin.left - wordSpacing - tw, + 'top': margin.top + barH * (i + 0.5) - th / 2, + 'text-align': 'right' + }); + titles.push(title); + }); + + //interaction + //hover + var getHoverIn = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + }; + }; + var getHoverOut = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px #fff', + 'background-color': '#fff' + }); + } + }; + }; + //click + var getClick = function (i) { + var index = i; + return function () { + clickHandle(data[index], index); + }; + }; + data.forEach(function (d, i) { + var hoverIn = getHoverIn(i); + var hoverOut = getHoverOut(i); + var click = getClick(i); + rects[i].hover(hoverIn, hoverOut); + rects[i].click(click); + titles[i].on("mouseenter", hoverIn); + titles[i].on("mouseleave", hoverOut); + titles[i].on("click", click); + }); + +}; \ No newline at end of file From 2f14b955adf9b5e6f6509320502a87cfa651381f Mon Sep 17 00:00:00 2001 From: hlqf Date: Tue, 24 Sep 2013 10:51:00 +0800 Subject: [PATCH 16/18] Add another styles of gender chart --- example/tifgender/tifgender.html | 31 ++++++ lib/charts/tifgender.js | 170 +++++++++++++++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 example/tifgender/tifgender.html create mode 100644 lib/charts/tifgender.js diff --git a/example/tifgender/tifgender.html b/example/tifgender/tifgender.html new file mode 100644 index 00000000..7bc7f084 --- /dev/null +++ b/example/tifgender/tifgender.html @@ -0,0 +1,31 @@ + + + + + Demo + + + + + +
+ + + \ No newline at end of file diff --git a/lib/charts/tifgender.js b/lib/charts/tifgender.js new file mode 100644 index 00000000..aea8b5ef --- /dev/null +++ b/lib/charts/tifgender.js @@ -0,0 +1,170 @@ +var TifGender = function (config) { + // 4 params must need + var width = config.width || 320, + height = config.height || 190; + var container = typeof config.container === "string" ? document.getElementById(config.container) : config.container; // id or dom node + $(container).css({'position': 'relative'}); + var data = config.data || [{name: "男", value: 40}, {name: "女", value: 60}]; + + // other optional params + var margin = config.margin || { + "top": 1, + "left": 1, + "bottom": 1, + "right": 1 + }; + var highlightColor = config.highlightColor || '#3391d4'; + var clickHandle = config.clickHandle || function (d, i) { + //console.log(d.name); + }; + var color = this.color = typeof data[0].color !== 'undefined' ? + data.map(function (d) { return d.color; }) : + ["#3fa9f5", "#ff88a2", "#909dd0", "#909dd0", "#ff88a2", "#ff88a2", "#ff88a2"]; + + var rotateAngle = Math.PI / 6; + + var w = width - margin.left - margin.right; + var h = height - margin.top - margin.bottom; + var r = Math.min(w, h) / 2; + var center = [margin.left + w / 2, margin.top + h / 2]; + + // data process; + data.forEach(function (d) { + d.isNull = d.value === null; + d.v = d.isNull ? 0 : d.value; + }); + var all = data.every(function (d) { + return !d.isNull; + }); + var sum = data[0].v + data[1].v; + var ratio1 = all ? + (sum === 0 ? 0.5 : data[0].v / sum) : + (data[0].isNull ? 0 : 1); + ratio1 = Math.max(0.000001, Math.min(0.999999, ratio1));//between 0.001 and 0.999 to ensure arc would always be drawn. + var angle1 = Math.PI * 2 * ratio1; + var angleStart = -angle1 / 2 - rotateAngle; + var angleEnd = angleStart + angle1; + var p1 = [center[0] + r * Math.cos(angleStart), center[1] + r * Math.sin(angleStart)]; + var p2 = [center[0] + r * Math.cos(angleEnd), center[1] + r * Math.sin(angleEnd)]; + + //draw circle + var paper = this.paper = new Raphael(container, width, height); + var pie1 = this.pie1 = paper.path( + "M" + center[0] + "," + center[1] + + "L" + p1[0] + "," + p1[1] + + "A" + r + "," + r + " 0, " + (ratio1 > 0.5 ? "1" : "0") + "," + "1 " + + p2[0] + "," + p2[1] + "Z" + ); + var pie2 = this.pie2 = paper.path( + "M" + center[0] + "," + center[1] + + "L" + p1[0] + "," + p1[1] + + "A" + r + "," + r + " 0, " + (ratio1 > 0.5 ? "0" : "1") + "," + "0 " + + p2[0] + "," + p2[1] + "Z" + ); + pie1.attr({ + 'cursor': 'pointer', + 'stroke-width': 2, + 'stroke': '#fff', + 'fill': color[0] + }); + pie2.attr({ + 'cursor': 'pointer', + 'stroke-width': 2, + 'stroke': '#fff', + 'fill': color[1] + }); + var pies = this.pies = [pie1, pie2]; + + // draw ratios + var trans = [ + [r * 1.3 * Math.cos(rotateAngle) + 0.2 * r, -r * 1.3 * Math.sin(rotateAngle) - 0.1 * r], + [-r * 1.3 * Math.cos(rotateAngle) - 0.8 * r, r * 1.3 * Math.sin(rotateAngle) - 0.2 * r] + ]; + var ratios = this.ratios = [paper.set(), paper.set()]; + ratios.forEach(function (d, i) { + if (data[i].isNull) { + return; + } + var v = i === 0 ? Math.round(ratio1 * 100) : 100 - Math.round(ratio1 * 100); + var numberCount = v < 10 ? 1 : (v === 100 ? 3 : 2); + d.push( + paper.text(center[0], center[1] + 10, v).attr({ + "fill": color[i], + "font-size": "26px", + "text-anchor": "start" + }), + paper.text(center[0] + 15 * numberCount, center[1] + 13, "%").attr({ + "fill": color[i], + "font-size": "16px", + "text-anchor": "start" + }) + ); + d.attr({ + "transform": "translate(t" + trans[i][0] + "," + trans[i][1] + ")" + }); + }); + + // draw title + var titles = this.titles = []; + data.forEach(function (d, i) { + var t = titles[i] = $("
" + data[i].name + "
").css({ + 'position': 'absolute', + 'left': center[0] + trans[i][0], + 'top': center[1] + trans[i][1] - 27, + 'border-radius': 3, + 'padding': 1, + 'cursor': 'pointer', + 'font-size': 14 + }).appendTo($(container)); + if (!all && !data[i].isNull) { + t.css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + }); + + //interaction + //hover + var getHoverIn = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px black', + 'background-color': highlightColor + }); + } + }; + }; + var getHoverOut = function (i) { + var index = i; + var needChange = !(!all && !data[i].isNull); + return function () { + if (needChange) { + titles[index].css({ + 'border': 'solid 1px #fff', + 'background-color': '#fff' + }); + } + }; + }; + //click + var getClick = function (i) { + var index = i; + return function () { + clickHandle(data[index], index); + }; + }; + data.forEach(function (d, i) { + var hoverIn = getHoverIn(i); + var hoverOut = getHoverOut(i); + var click = getClick(i); + pies[i].hover(hoverIn, hoverOut); + pies[i].click(click); + titles[i].on("mouseenter", hoverIn); + titles[i].on("mouseleave", hoverOut); + titles[i].on("click", click); + }); +}; \ No newline at end of file From 9b49196f3a94d714438cfa40d3fa8f60b624783d Mon Sep 17 00:00:00 2001 From: hlqf Date: Wed, 25 Sep 2013 12:05:18 +0800 Subject: [PATCH 17/18] Add vertical tirbarlevel chart --- example/tifbarlevel/tifbarlevel.html | 8 +- lib/charts/tifbarlevel2.js | 172 +++++++++++++++++++++++++++ 2 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 lib/charts/tifbarlevel2.js diff --git a/example/tifbarlevel/tifbarlevel.html b/example/tifbarlevel/tifbarlevel.html index fb4a3bfe..088aeb25 100644 --- a/example/tifbarlevel/tifbarlevel.html +++ b/example/tifbarlevel/tifbarlevel.html @@ -5,15 +5,17 @@ Demo - + + +
- + - +