From 607cdd6d295575a6a9217a1fb85ab9c2c996a94d Mon Sep 17 00:00:00 2001 From: Jackson Tian Date: Fri, 23 Nov 2012 15:43:48 +0800 Subject: [PATCH] Add more method --- bin/config.js | 1 + lib/charts/legend.js | 47 +++++++++++++++++++++++++++------------- lib/charts/path_label.js | 38 ++++++++++++++++++++++++-------- lib/charts/stream.js | 30 +++++++++++++++++++++++-- lib/components/stream.js | 7 +++++- lib/datav.js | 24 ++++++++++++++++++++ 6 files changed, 120 insertions(+), 27 deletions(-) diff --git a/bin/config.js b/bin/config.js index 11d1758..dfa497a 100644 --- a/bin/config.js +++ b/bin/config.js @@ -36,6 +36,7 @@ exports.data_shu = exports.without([ exports.data_mofang = exports.without([ 'deps/raphael.js', + 'deps/underscore-1.4.2.js', 'deps/jquery-1.7.1.js' ]); diff --git a/lib/charts/legend.js b/lib/charts/legend.js index 59b35c1..2661467 100644 --- a/lib/charts/legend.js +++ b/lib/charts/legend.js @@ -1,4 +1,4 @@ -/*global Raphael, d3, $, define, _ */ +/*global Raphael, $, define, _ */ /*! * StreamLegend的兼容定义 */ @@ -39,11 +39,12 @@ required: true, index: 2 }; + this.init(); } }); Legend.prototype.init = function () { - var conf = this.owner.defaults; + var conf = this.defaults; this.legend = $("
"); this.legend.css({ "overflow": "hidden", @@ -51,6 +52,7 @@ "width": conf.leftLegendWidth - this.legendIndent + "px" }); this.node.append(this.legend); + this.initEvents(); }; Legend.prototype.setSource = function (source, map) { @@ -58,12 +60,24 @@ this.list = _.keys(_.groupBy(source, map.type)); }; - Legend.prototype.render = function () { + Legend.prototype.initEvents = function () { + var that = this; + that.on('hoverIn', function (index) { + that.highlight(index); + }).on('hoverOut', function (index) { + that.lowlight(index); + }).on('level_changed', function (start, end, needMore) { + that.render(start, end, needMore); + }); + }; + + Legend.prototype.render = function (level) { + var conf = this.defaults; + conf.level = level || 0; var that = this; - this.init(); this.clear(); this.legends = []; - var colorFunc = this.defaults.colorFunc, + var colorFunc = conf.colorFunc, hoverIn = function (e) { var index = e.data.index; that.fire('hoverIn', index); @@ -74,20 +88,23 @@ that.fire('hoverOut', index); this.lowlight(index); }; - - that.on('hoverIn', function (index) { - that.highlight(index); - }).on('hoverOut', function (index) { - that.lowlight(index); - }); - var ul = $("").css({ "margin": "0 0 0 10px", - "paddingLeft": 0 + "paddingLeft": 0 }); - for (var i = 0, l = this.list.length; i < l && i < this.legendIndent; i++) { + + var selected; + if (!conf.more) { + selected = this.list.slice(0); + } else { + selected = DataV.more(this.list, conf.level, conf.max, function () { + return conf.moreLabel; + }); + } + + for (var i = 0, l = selected.length; i < l; i++) { var color = colorFunc(i); - var li = $('
  • ' + this.list[i] + '
    • '); + var li = $('
  • ' + selected[i] + '
    • '); li.mouseenter({"index": i}, $.proxy(hoverIn, this)).mouseleave({"index": i}, $.proxy(hoverOut, this)); ul.append(li); this.legends.push(li); diff --git a/lib/charts/path_label.js b/lib/charts/path_label.js index f0eb9b6..dd83895 100644 --- a/lib/charts/path_label.js +++ b/lib/charts/path_label.js @@ -42,6 +42,7 @@ PathLabel.prototype.render = function () { this.clear(); + var that = this; var owner = this.owner; var paths = owner.paths; var conf = this.defaults; @@ -108,11 +109,24 @@ }; var getPathLabel = this.defaults.getPathLabel || this.getPathLabel; + var selected; + var values = _.values(this.groupedByType); + if (!conf.more) { + selected = values.slice(0); + } else { + selected = DataV.more(values, conf.level, conf.max, function (remains) { + var obj = {}; + obj.type = conf.moreLabel; + obj.rank = remains[0].rank; + obj.sum = DataV.sum(remains, "sum"); + return obj; + }); + } for (var i = 0, l = paths.length; i < l; i++) { var path = paths[i]; - var row = this.groupedByType[this.types[i]]; + var row = selected[i]; var obj = { - type: this.types[i], + type: row.type, rank: row.rank, sum: row.sum, total: this.total @@ -134,18 +148,23 @@ } else { label.attr({"opacity": 0}); } - if (i === 0) { - path.attr({"cursor": "pointer"}); - label.attr({"cursor": "pointer"}); - } else { - path.attr({"cursor": "auto"}); - label.attr({"cursor": "auto"}); - } + + path.attr({"cursor": "auto"}); + label.attr({"cursor": "auto"}); labels.push(label); } this.labels = labels; }; + /** + * 生成标签的默认方法，可以通过`setOption({getPathLable: function});`覆盖。 + * Properties: + * - `type`, 条带类型 + * - `rank`, 条带排名 + * - `sum`, 当前条带总值 + * - `total`, 所有条带总值 + * @param {Object} obj 当前条带的对象 + */ PathLabel.prototype.getPathLabel = function (obj) { return obj.type + " " + "排名: 第" + obj.rank; }; @@ -179,6 +198,7 @@ var sorted = _.sortBy(this.groupedByType, function (group, type) { var sum = DataV.sum(group, that.mapping.value); that.groupedByType[type].sum = sum; + that.groupedByType[type].type = type; return -sum; }); this.types = _.keys(this.groupedByType); diff --git a/lib/charts/stream.js b/lib/charts/stream.js index 2469521..2af1c91 100644 --- a/lib/charts/stream.js +++ b/lib/charts/stream.js @@ -67,7 +67,8 @@ this.rawData = source; this.rawMap = map; this.grouped = _.groupBy(source, this.mapping.x); - this.layoutData = this.remapSource(source); + this.remaped = this.remapSource(source); + this.layoutData = this.getLayoutData(); }; Stream.prototype.remapSource = function () { @@ -91,6 +92,31 @@ } return remap; }; + + /*! + * 获取等级数据 + */ + Stream.prototype.getLayoutData = function () { + var conf = this.defaults; + var remaped = this.remaped; + var that = this; + + if (!conf.more) { + return remaped; + } else { + return DataV.more(remaped, conf.level, conf.max, function (remains) { + var obj = []; + for (var i = 0; i < that.columnCount; i++) { + obj.push({ + x: i, + y: DataV.sum(_.pluck(remains, i), 'y') + }); + } + return obj; + }); + } + }; + Stream.prototype.layout = function () { var conf = this.defaults; d3.layout.stack().offset(conf.offset).order(conf.order)(this.layoutData); @@ -249,7 +275,7 @@ /* */ Stream.prototype.getColor = function () { - var count = this.defaults.colorCount; + var count = this.layoutData.length; var color = this.defaults.gradientColor || ["#8be62f", "#1F4FD8"]; var gradientColor = DataV.gradientColor(color, "special"); var percent = 1 / count; diff --git a/lib/components/stream.js b/lib/components/stream.js index a3840a2..05fb755 100755 --- a/lib/components/stream.js +++ b/lib/components/stream.js @@ -1,4 +1,4 @@ -/*global Raphael, d3, $, define, _ */ +/*global $, define */ /*! * Stream的兼容定义 */ @@ -61,6 +61,9 @@ this.defaults.legendBesidesWidth = undefined; this.defaults.legendBesidesHeight = undefined; + this.defaults.more = false; + this.defaults.moreLabel = "more"; + this.defaults.max = 20; this.defaults.level = 0; this.defaults.chartWidth = undefined;//depends on width, do not recommend to change @@ -143,6 +146,8 @@ that.tip.setContent(rowIndex, columnIndex); //axis pop bubble that.axis.refreshTab(columnIndex); + }).on('level_changed', function (start, end, needMore) { + that.legend.fire('level_changed', start, end, needMore); }); }; diff --git a/lib/datav.js b/lib/datav.js index ba88b38..543cd9e 100644 --- a/lib/datav.js +++ b/lib/datav.js @@ -659,5 +659,29 @@ return count; }; + DataV.more = function (list, level, step, last) { + var selected; + var start = level * step, end; + last = last || function (remains) { + return remains[0]; + }; + + var needMoreRow; + if (start + step >= list.length) { + needMoreRow = false; + end = list.length - 1; + } else { + needMoreRow = true; + end = start + step - 1; + } + if (!needMoreRow) { + selected = list.slice(start); + } else { + selected = list.slice(start, end); + selected.push(last(list.slice(end))); + } + return selected; + }; + return DataV; });