From 0b7a2dd9e343fa9a3c9fad250259725a62169efb Mon Sep 17 00:00:00 2001 From: lang Date: Wed, 16 Sep 2015 18:55:48 +0800 Subject: [PATCH] Fix tooltip --- src/chart/bar/BarView.js | 2 -- src/chart/helper/DataSymbol.js | 4 ---- src/component/tooltip.js | 26 ++++++++++----------- src/data/List.js | 41 +++++++++++++++++++++++++++++++--- src/model/Global.js | 27 +++++++++++++++------- src/model/Series.js | 9 ++++---- test/bar.html | 7 ++++-- 7 files changed, 80 insertions(+), 36 deletions(-) diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js index d4a1a28d9..595c47c50 100644 --- a/src/chart/bar/BarView.js +++ b/src/chart/bar/BarView.js @@ -47,7 +47,6 @@ define(function (require) { }); data.setItemGraphicEl(dataIndex, rect); - rect.dataIndex = dataIndex; group.add(rect); @@ -68,7 +67,6 @@ define(function (require) { }, 500, 'cubicOut'); data.setItemGraphicEl(newIndex, rect); - rect.dataIndex = newIndex; // Add back group.add(rect); diff --git a/src/chart/helper/DataSymbol.js b/src/chart/helper/DataSymbol.js index 973590195..df69d5598 100644 --- a/src/chart/helper/DataSymbol.js +++ b/src/chart/helper/DataSymbol.js @@ -76,9 +76,6 @@ define(function (require) { data.setItemGraphicEl(newIdx, symbolEl); - // Attach data on the el - symbolEl.dataIndex = newIdx; - group.add(symbolEl); }) .update(function (newIdx, oldIdx) { @@ -107,7 +104,6 @@ define(function (require) { } data.setItemGraphicEl(newIdx, el); - data.dataIndex = newIdx; // Add back group.add(el); diff --git a/src/component/tooltip.js b/src/component/tooltip.js index 066664693..1d0e8e428 100644 --- a/src/component/tooltip.js +++ b/src/component/tooltip.js @@ -1,3 +1,4 @@ +// FIXME Better way to pack data in graphic element define(function (require) { var TooltipContent = require('./tooltip/TooltipContent'); @@ -69,23 +70,23 @@ define(function (require) { var el = e.target; var tooltipModel = this._tooltipModel; var trigger = tooltipModel.get('trigger'); + var ecModel = this._ecModel; if (!tooltipModel) { return; } if (trigger === 'item') { - - if (!el || !el.data) { + if (!el || el.dataIndex == null) { this._tooltipContent.hideLater(tooltipModel.get('hideDelay')); return; } - var dataItem = el.data; + var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex); - this._showItemTooltip(dataItem, e); + this._showItemTooltip(seriesModel, el.dataIndex, e); } else { @@ -347,22 +348,21 @@ define(function (require) { /** * Show tooltip on item - * @param {module:echarts/model/Model} + * @param {module:echarts/model/Series} seriesModel + * @param {number} dataIndex * @param {Object} e */ - _showItemTooltip: function (dataItem, e) { - - var seriesModel = dataItem.parentModel; + _showItemTooltip: function (seriesModel, dataIndex, e) { + // FIXME Graph data + var data = seriesModel.getData(); + var itemModel = data.getItemModel(dataIndex); - if (!seriesModel) { - return; - } var rootTooltipModel = this._tooltipModel; var showContent = rootTooltipModel.get('showContent'); var tooltipContent = this._tooltipContent; - var tooltipModel = dataItem.getModel('tooltip'); + var tooltipModel = itemModel.getModel('tooltip'); // If series model if (tooltipModel.parentModel) { @@ -376,7 +376,7 @@ define(function (require) { tooltipContent.show(tooltipModel); tooltipContent.setContent( - seriesModel.formatTooltipHTML(dataItem) + seriesModel.formatTooltipHTML(dataIndex, data.getName(dataIndex)) ); var x = e.offsetX + 20; diff --git a/src/data/List.js b/src/data/List.js index 1721e44f7..1f35db8aa 100644 --- a/src/data/List.js +++ b/src/data/List.js @@ -90,6 +90,10 @@ define(function (require) { */ this._storage = {}; + /** + * @type {Array.} + */ + this._nameList = []; /** * Models of data option is stored sparse for optimizing memory cost * @type {Array.} @@ -137,8 +141,10 @@ define(function (require) { /** * Initialize from data + * @param {Array.} data + * @param {Array.} [nameList] */ - listProto.initData = function (data) { + listProto.initData = function (data, nameList) { // Clear var optionModels = this._optionModels = []; var storage = this._storage = {}; @@ -200,6 +206,8 @@ define(function (require) { } this._rawValueDims = rawValue1D ? dimensions.slice(1, 2) : dimensions.slice(); + + this._nameList = nameList; }; /** @@ -292,11 +300,25 @@ define(function (require) { /** * Get raw data index + * @param {number} idx + * @return {number} */ listProto.getRawIndex = function (idx) { return this.indices[idx]; }; + var nameQueryPath = ['name']; + /** + * @param {number} idx + * @return {string} + */ + listProto.getName = function (idx) { + var nameList = this._nameList; + return (nameList && nameList[this.indices[idx]]) + || this.getItemModel(idx).get(nameQueryPath, true) || ''; + }; + + function normalizeDimensions(dimensions) { if (typeof (dimensions) === 'string') { dimensions = [dimensions]; @@ -447,11 +469,13 @@ define(function (require) { /** * Get model of one data item. * It will create a temporary model if value on idx is not an option. + * + * @param {number} idx */ listProto.getItemModel = function (idx) { var storage = this._storage; var optionModelIndices = storage.$optionModelIndices; - var modelIndex = optionModelIndices && optionModelIndices[idx]; + var modelIndex = optionModelIndices && optionModelIndices[this.indices[idx]]; var model = this._optionModels[modelIndex]; @@ -571,6 +595,11 @@ define(function (require) { * @param {module:zrender/Element} el */ listProto.setItemGraphicEl = function (idx, el) { + // Add data index and series index for indexing the data by element + // Useful in tooltip + el.dataIndex = idx; + el.seriesIndex = this.seriesModel.seriesIndex; + this._graphicEls[idx] = el; }; @@ -602,6 +631,7 @@ define(function (require) { list._storage = this._storage; list._optionModels = this._optionModels; list._rawValueDims = this._rawValueDims; + list._nameList = this._nameList; list.indices = this.indices.slice(); @@ -616,6 +646,7 @@ define(function (require) { var dimensions; var categoryAxisModel; + var nameList = []; // FIXME // 这里 List 跟几个坐标系和坐标系 Model 耦合了 if (coordinateSystem === 'cartesian2d') { @@ -672,9 +703,13 @@ define(function (require) { } } + if (categoryAxisModel) { + nameList = categoryAxisModel.get('data'); + } + var list = new List(dimensions, seriesModel); - list.initData(data); + list.initData(data, nameList); return list; }; diff --git a/src/model/Global.js b/src/model/Global.js index 2181b342c..855df3a45 100644 --- a/src/model/Global.js +++ b/src/model/Global.js @@ -230,6 +230,25 @@ define(function (require) { } }, + // FIXME Index of series is confusing + /** + * @param {number} seriesIndex + * @param {boolean} beforeProcessing + * @return {module:echarts/model/Series} + */ + getSeriesByIndex: function (seriesIndex, beforeProcessing) { + // return this._componentsMap.series[seriesIndex]; + var series = beforeProcessing + ? this._componentsMapBeforeProcessing.series + : this._componentsMap.series; + for (var i = 0, len = series.length; i < len; i++) { + // name should be unique. + if (series[i].seriesIndex === seriesIndex) { + return series[i]; + } + } + }, + /** * @param {string} type * @return {Array.} @@ -240,14 +259,6 @@ define(function (require) { }); }, - /** - * @param {number} seriesIndex - * @return {module:echarts/model/Series} - */ - getSeries: function (seriesIndex) { - return this._componentsMap.series[seriesIndex]; - }, - /** * @return {Array.} */ diff --git a/src/model/Series.js b/src/model/Series.js index b7554a779..887209f18 100644 --- a/src/model/Series.js +++ b/src/model/Series.js @@ -90,15 +90,16 @@ define(function(require) { /** * Default tooltip formatter * - * @param {module:echarts/model/Model} dataItem + * @param {number} dataIndex */ - formatTooltipHTML: function (dataItem) { - var value = dataItem.getRawValue(); + formatTooltipHTML: function (dataIndex, name) { + var data = this._data; + var value = data.getRawValue(dataIndex); var formattedValue = zrUtil.isArray(value) ? zrUtil.map(value, addCommas) : addCommas(value); return encodeHTML(this.name) + '
' - + encodeHTML(dataItem.name) + ' : ' + + encodeHTML(name) + ' : ' + formattedValue; }, diff --git a/test/bar.html b/test/bar.html index 2bec038ee..c4dbca419 100644 --- a/test/bar.html +++ b/test/bar.html @@ -18,7 +18,8 @@ 'echarts', 'echarts/chart/bar', 'echarts/component/legend', - 'echarts/component/grid' + 'echarts/component/grid', + 'echarts/component/tooltip' ], function (echarts) { var chart = echarts.init(document.getElementById('main'), null, { @@ -30,7 +31,7 @@ var data2 = []; var data3 = []; - for (var i = 0; i < 20; i++) { + for (var i = 0; i < 10; i++) { xAxisData.push('类目' + i); data1.push(Math.random() * 5); data2.push(Math.random()); @@ -52,6 +53,7 @@ // 'bar': false } }, + tooltip: {}, xAxis: { data: xAxisData, splitArea: { @@ -59,6 +61,7 @@ } }, yAxis: { + // inverse: true, splitArea: { show: false } -- GitLab