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;
});