From 41d9690adf18b2742aa8a1c1a1988ff554339e07 Mon Sep 17 00:00:00 2001 From: lang Date: Wed, 4 May 2016 19:37:31 +0800 Subject: [PATCH] Line connectNulls, Fix #3009, #2579 --- src/chart/bar/BarSeries.js | 8 ---- src/chart/line/LineSeries.js | 42 +++++++------------ src/chart/line/LineView.js | 6 ++- src/chart/line/poly.js | 81 +++++++++++++++++++++++++++++------- src/model/Series.js | 1 + test/area.html | 14 ++++++- 6 files changed, 97 insertions(+), 55 deletions(-) diff --git a/src/chart/bar/BarSeries.js b/src/chart/bar/BarSeries.js index 10986442b..567cd8866 100644 --- a/src/chart/bar/BarSeries.js +++ b/src/chart/bar/BarSeries.js @@ -53,14 +53,6 @@ define(function(require) { // label: { // normal: { // show: false - // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调 - - // // 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 - // // 'inside' | 'insideleft' | 'insideTop' | 'insideRight' | 'insideBottom' | - // // 'outside' |'left' | 'right'|'top'|'bottom' - // position: - - // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE // } // }, itemStyle: { diff --git a/src/chart/line/LineSeries.js b/src/chart/line/LineSeries.js index 7bbe6e933..c7cc7ad39 100644 --- a/src/chart/line/LineSeries.js +++ b/src/chart/line/LineSeries.js @@ -33,29 +33,12 @@ define(function(require) { label: { normal: { - // show: false, position: 'top' - // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调 - // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 - // 'inside'|'left'|'right'|'top'|'bottom' - // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE } - // emphasis: { - // show: false, - // position: 'top' - // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调 - // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 - // 'inside'|'left'|'right'|'top'|'bottom' - // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE - // } }, // itemStyle: { - // normal: { - // // color: 各异 - // }, - // emphasis: { - // // color: 各异, - // } + // normal: {}, + // emphasis: {} // }, lineStyle: { normal: { @@ -63,24 +46,27 @@ define(function(require) { type: 'solid' } }, - // areaStyle: { - // }, - // smooth: false, - // smoothMonotone: null, + // areaStyle: {}, + + smooth: false, + smoothMonotone: null, // 拐点图形类型 symbol: 'emptyCircle', // 拐点图形大小 symbolSize: 4, // 拐点图形旋转控制 - // symbolRotate: null, + symbolRotate: null, // 是否显示 symbol, 只有在 tooltip hover 的时候显示 showSymbol: true, // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略） - // showAllSymbol: false - // - // 大数据过滤，'average', 'max', 'min', 'sum' - // sampling: 'none' + showAllSymbol: false, + + // 是否连接断点 + connectNulls: false, + + // 数据过滤，'average', 'max', 'min', 'sum' + sampling: 'none', animationEasing: 'linear' } diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js index 4f0de0525..b36b12800 100644 --- a/src/chart/line/LineView.js +++ b/src/chart/line/LineView.js @@ -306,7 +306,8 @@ define(function(require) { smooth = getSmooth(seriesModel.get('smooth')); polyline.setShape({ smooth: smooth, - smoothMonotone: seriesModel.get('smoothMonotone') + smoothMonotone: seriesModel.get('smoothMonotone'), + connectNulls: seriesModel.get('connectNulls') }); if (polygon) { @@ -330,7 +331,8 @@ define(function(require) { polygon.setShape({ smooth: smooth, stackedOnSmooth: stackedOnSmooth, - smoothMonotone: seriesModel.get('smoothMonotone') + smoothMonotone: seriesModel.get('smoothMonotone'), + connectNulls: seriesModel.get('connectNulls') }); } diff --git a/src/chart/line/poly.js b/src/chart/line/poly.js index 213db5026..0a2a998ec 100644 --- a/src/chart/line/poly.js +++ b/src/chart/line/poly.js @@ -15,14 +15,26 @@ define(function (require) { var cp0 = []; var cp1 = []; + function isPointNull(p) { + return isNaN(p[0]) || isNaN(p[1]); + } + function drawSegment( - ctx, points, start, stop, len, - dir, smoothMin, smoothMax, smooth, smoothMonotone + ctx, points, start, segLen, allLen, + dir, smoothMin, smoothMax, smooth, smoothMonotone, connectNulls ) { + var prevIdx = 0; var idx = start; - for (var k = 0; k < len; k++) { + for (var k = 0; k < segLen; k++) { var p = points[idx]; - if (idx >= stop || idx < 0 || isNaN(p[0]) || isNaN(p[1])) { + if (idx >= allLen || idx < 0) { + break; + } + if (isPointNull(p)) { + if (connectNulls) { + idx += dir; + continue; + } break; } @@ -32,21 +44,26 @@ define(function (require) { } else { if (smooth > 0) { - var prevIdx = idx - dir; var nextIdx = idx + dir; + var nextP = points[nextIdx]; + if (connectNulls) { + // Find next point not null + while (nextP && isPointNull(points[nextIdx])) { + nextIdx += dir; + nextP = points[nextIdx]; + } + } var ratioNextSeg = 0.5; var prevP = points[prevIdx]; var nextP = points[nextIdx]; // Last point - if ((dir > 0 && (idx === len - 1 || isNaN(nextP[0]) || isNaN(nextP[1]))) - || (dir <= 0 && (idx === 0 || isNaN(nextP[0]) || isNaN(nextP[1]))) - ) { + if (!nextP || isPointNull(nextP)) { v2Copy(cp1, p); } else { - // If next data is null - if (isNaN(nextP[0]) || isNaN(nextP[1])) { + // If next data is null in not connect case + if (isPointNull(nextP) && !connectNulls) { nextP = p; } @@ -88,6 +105,7 @@ define(function (require) { } } + prevIdx = idx; idx += dir; } @@ -125,7 +143,9 @@ define(function (require) { smoothConstraint: true, - smoothMonotone: null + smoothMonotone: null, + + connectNulls: false }, style: { @@ -142,11 +162,24 @@ define(function (require) { var result = getBoundingBox(points, shape.smoothConstraint); + if (shape.connectNulls) { + // Must remove first and last null values avoid draw error in polygon + for (; len > 0; len--) { + if (!isPointNull(points[len - 1])) { + break; + } + } + for (; i < len; i++) { + if (!isPointNull(points[i])) { + break; + } + } + } while (i < len) { i += drawSegment( ctx, points, i, len, len, 1, result.min, result.max, shape.smooth, - shape.smoothMonotone + shape.smoothMonotone, shape.connectNulls ) + 1; } } @@ -168,7 +201,9 @@ define(function (require) { smoothConstraint: true, - smoothMonotone: null + smoothMonotone: null, + + connectNulls: false }, buildPath: function (ctx, shape) { @@ -180,16 +215,30 @@ define(function (require) { var smoothMonotone = shape.smoothMonotone; var bbox = getBoundingBox(points, shape.smoothConstraint); var stackedOnBBox = getBoundingBox(stackedOnPoints, shape.smoothConstraint); + + if (shape.connectNulls) { + // Must remove first and last null values avoid draw error in polygon + for (; len > 0; len--) { + if (!isPointNull(points[len - 1])) { + break; + } + } + for (; i < len; i++) { + if (!isPointNull(points[i])) { + break; + } + } + } while (i < len) { var k = drawSegment( ctx, points, i, len, len, 1, bbox.min, bbox.max, shape.smooth, - smoothMonotone + smoothMonotone, shape.connectNulls ); drawSegment( - ctx, stackedOnPoints, i + k - 1, len, k, + ctx, stackedOnPoints, i + k - 1, k, len, -1, stackedOnBBox.min, stackedOnBBox.max, shape.stackedOnSmooth, - smoothMonotone + smoothMonotone, shape.connectNulls ); i += k + 1; diff --git a/src/model/Series.js b/src/model/Series.js index 28a81a59f..5ffbf3ce6 100644 --- a/src/model/Series.js +++ b/src/model/Series.js @@ -70,6 +70,7 @@ define(function(require) { zrUtil.merge(option, this.getDefaultOption()); // Default label emphasis `position` and `show` + // FIXME Set label in merge modelUtil.defaultEmphasis( option.label, ['position', 'show', 'textStyle', 'distance', 'formatter'] ); diff --git a/test/area.html b/test/area.html index 58e4efffd..5a250076a 100644 --- a/test/area.html +++ b/test/area.html @@ -33,6 +33,11 @@ var data2 = []; var data3 = []; + xAxisData.push('类目' + -1); + data1.push('-'); + data2.push('-'); + data3.push('-'); + for (var i = 0; i < 5; i++) { xAxisData.push('类目' + i); data1.push((-Math.random() - 0.2).toFixed(3)); @@ -51,6 +56,10 @@ data2.push((Math.random() + 0.3).toFixed(3)); data3.push((Math.random() + 0.2).toFixed(3)); } + xAxisData.push('类目' + i); + data1.push('-'); + data2.push('-'); + data3.push('-'); var itemStyle = { normal: { @@ -103,7 +112,8 @@ symbolSize: 10, data: data1, itemStyle: itemStyle, - smooth: true + smooth: true, + connectNulls: true }, { name: 'line2', type: 'line', @@ -111,6 +121,7 @@ symbolSize: 10, data: data2, itemStyle: itemStyle, + connectNulls: true, smooth: true }, { name: 'line3', @@ -124,6 +135,7 @@ show: true } }, + connectNulls: true, smooth: true }] }); -- GitLab