This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new 91076b4 Fix rounding error for cartesian symbol cilp.
91076b4 is described below
commit 91076b4a4df2bdca6862f7722ec98c6ffa4d376c
Author: sushuang <sushuang0...@gmail.com>
AuthorDate: Sun Apr 22 00:46:28 2018 +0800
Fix rounding error for cartesian symbol cilp.
---
src/chart/line/LineView.js | 64 +++++----
test/axis-boundaryGap.html | 102 +--------------
test/dataZoom-clip.html | 317 +++++++++++++++++++++++++++++++--------------
3 files changed, 256 insertions(+), 227 deletions(-)
diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
index 86a4d03..9e51617 100644
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -61,7 +61,7 @@ function getStackedOnPoints(coordSys, data, dataCoordInfo) {
return points;
}
-function createGridClipShape(cartesian, hasAnimation, seriesModel) {
+function createGridClipShape(cartesian, hasAnimation, forSymbol, seriesModel) {
var xExtent = getAxisExtentWithGap(cartesian.getAxis('x'));
var yExtent = getAxisExtentWithGap(cartesian.getAxis('y'));
var isHorizontal = cartesian.getBaseAxis().isHorizontal();
@@ -70,26 +70,29 @@ function createGridClipShape(cartesian, hasAnimation,
seriesModel) {
var y = Math.min(yExtent[0], yExtent[1]);
var width = Math.max(xExtent[0], xExtent[1]) - x;
var height = Math.max(yExtent[0], yExtent[1]) - y;
- var lineWidth = seriesModel.get('lineStyle.width') || 2;
- // Expand clip shape to avoid clipping when line value exceeds axis
- var expandSize = seriesModel.get('clipOverflow') ? lineWidth / 2 :
Math.max(width, height);
- if (isHorizontal) {
- y -= expandSize;
- height += expandSize * 2;
+
+ // Avoid float number rounding error for symbol on the edge of axis extent.
+ // See #7913 and `test/dataZoom-clip.html`.
+ if (forSymbol) {
+ x -= 0.5;
+ width += 0.5;
+ y -= 0.5;
+ height += 0.5;
}
else {
- x -= expandSize;
- width += expandSize * 2;
+ var lineWidth = seriesModel.get('lineStyle.width') || 2;
+ // Expand clip shape to avoid clipping when line value exceeds axis
+ var expandSize = seriesModel.get('clipOverflow') ? lineWidth / 2 :
Math.max(width, height);
+ if (isHorizontal) {
+ y -= expandSize;
+ height += expandSize * 2;
+ }
+ else {
+ x -= expandSize;
+ width += expandSize * 2;
+ }
}
- // Avoid numberic rounding error (when the point is on the edge,
- // the result may be unexpectedly by rounding error).
- // See #7913 and `test/dataZoom-clip.html`.
- x = round(x, 1);
- y = round(y, 1);
- width = round(width, 1);
- height = round(height, 1);
-
var clipPath = new graphic.Rect({
shape: {
x: x,
@@ -112,15 +115,22 @@ function createGridClipShape(cartesian, hasAnimation,
seriesModel) {
return clipPath;
}
-function createPolarClipShape(polar, hasAnimation, seriesModel) {
+function createPolarClipShape(polar, hasAnimation, forSymbol, seriesModel) {
var angleAxis = polar.getAngleAxis();
var radiusAxis = polar.getRadiusAxis();
- var radiusExtent = radiusAxis.getExtent();
+ var radiusExtent = radiusAxis.getExtent().slice();
+ radiusExtent[0] > radiusExtent[1] && radiusExtent.reverse();
var angleExtent = angleAxis.getExtent();
var RADIAN = Math.PI / 180;
+ // Avoid float number rounding error for symbol on the edge of axis extent.
+ if (forSymbol) {
+ radiusExtent[0] -= 0.5;
+ radiusExtent[1] += 0.5;
+ }
+
var clipPath = new graphic.Sector({
shape: {
cx: round(polar.cx, 1),
@@ -145,10 +155,10 @@ function createPolarClipShape(polar, hasAnimation,
seriesModel) {
return clipPath;
}
-function createClipShape(coordSys, hasAnimation, seriesModel) {
+function createClipShape(coordSys, hasAnimation, forSymbol, seriesModel) {
return coordSys.type === 'polar'
- ? createPolarClipShape(coordSys, hasAnimation, seriesModel)
- : createGridClipShape(coordSys, hasAnimation, seriesModel);
+ ? createPolarClipShape(coordSys, hasAnimation, forSymbol, seriesModel)
+ : createGridClipShape(coordSys, hasAnimation, forSymbol, seriesModel);
}
function turnPointsIntoStep(points, coordSys, stepTurnAt) {
@@ -417,7 +427,7 @@ export default ChartView.extend({
) {
showSymbol && symbolDraw.updateData(data, {
isIgnore: isIgnoreFunc,
- clipShape: createClipShape(coordSys, false, seriesModel)
+ clipShape: createClipShape(coordSys, false, true, seriesModel)
});
if (step) {
@@ -433,7 +443,7 @@ export default ChartView.extend({
coordSys, hasAnimation
);
}
- lineGroup.setClipPath(createClipShape(coordSys, true,
seriesModel));
+ lineGroup.setClipPath(createClipShape(coordSys, true, false,
seriesModel));
}
else {
if (isAreaChart && !polygon) {
@@ -449,16 +459,14 @@ export default ChartView.extend({
polygon = this._polygon = null;
}
- var coordSysClipShape = createClipShape(coordSys, false,
seriesModel);
-
// Update clipPath
- lineGroup.setClipPath(coordSysClipShape);
+ lineGroup.setClipPath(createClipShape(coordSys, false, false,
seriesModel));
// Always update, or it is wrong in the case turning on legend
// because points are not changed
showSymbol && symbolDraw.updateData(data, {
isIgnore: isIgnoreFunc,
- clipShape: coordSysClipShape
+ clipShape: createClipShape(coordSys, false, true, seriesModel)
});
// Stop symbol animation and sync with line points
diff --git a/test/axis-boundaryGap.html b/test/axis-boundaryGap.html
index 7009dfe..445c134 100644
--- a/test/axis-boundaryGap.html
+++ b/test/axis-boundaryGap.html
@@ -16,7 +16,7 @@
</style>
<div class="chart" id="a"></div>
- <div class="chart" id="b"></div>
+
@@ -129,105 +129,5 @@
</script>
-
-
- <script>
-
- require(['echarts'], function (echarts) {
-
- var gridLeft = 50;
- var gridRight = 20;
- var option = {
- tooltip : {
- trigger: 'axis',
- },
- legend: {
- },
- dataZoom: [{
- }, {
- type: 'inside'
- }],
- grid: {
- id: 'cartesian',
- left: gridLeft,
- right: gridRight
- },
- xAxis: {
- min: 500,
- max: 2000
- },
- yAxis: {
- min: 0,
- max: 200
- },
- series: [
- {
- type:'line',
- symbolSize: 20,
- data:[{
- value: [2000, 100],
- itemStyle: {
- color: 'red'
- }
- }, {
- value: [1000, 200],
- itemStyle: {
- color: 'red'
- }
- }, {
- value: [500, 0],
- itemStyle: {
- color: 'red'
- }
- }, {
- value: [2001, 100],
- itemStyle: {
- color: 'green'
- }
- }]
- }
- ]
- };
-
- var chart = testHelper.create(echarts, 'b', {
- title: [
- 'Three red symbol on grid edge should always be
displayed',
- 'One green symbol out of the grid should not be
displayed'
- ],
- option: option,
- info: {
- xAxis: option.xAxis,
- yAxis: option.yAxis
- }
- });
-
- var delta = 7;
- chart && setInterval(function () {
- var width = chart.getWidth();
- if (
- (delta > 0 && gridRight > width - gridLeft - 10)
- || (delta < 0 && gridRight < 10)
- ) {
- delta = -delta;
- }
-
- gridRight += delta;
-
- chart.setOption({
- grid: {
- id: 'cartesian',
- right: gridRight
- }
- });
- }, 100);
- });
-
- </script>
-
-
-
-
-
-
</body>
</html>
\ No newline at end of file
diff --git a/test/dataZoom-clip.html b/test/dataZoom-clip.html
index 146c40b..e58e444 100644
--- a/test/dataZoom-clip.html
+++ b/test/dataZoom-clip.html
@@ -2,7 +2,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="../dist/echarts.js"></script>
+ <script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
@@ -19,78 +19,81 @@
<div id="main0"></div>
<div id="main1"></div>
-
+ <div class="chart" id="b"></div>
<script>
-
- function makeSpecialTrendData() {
- var data = {data1: []};
- var base = -100;
- for (var i = 0; i < 50; i++) {
- if (i < 10) {
- data.data1.push([i * 10, base += 197 + random(3)]);
- }
- else if (i < 20) {
- data.data1.push([i * 10, base -= 17 + random(3)]);
- }
- else if (i < 30) {
- data.data1.push([i * 10, base += 3 + random(3)]);
- }
- else if (i < 40) {
- data.data1.push([i * 10, base -= 5 + random(3)]);
- }
- else {
- data.data1.push([i * 10, base += 157 + random(3)]);
+ require(['echarts'], function (echarts) {
+
+
+ function makeSpecialTrendData() {
+ var data = {data1: []};
+ var base = -100;
+ for (var i = 0; i < 50; i++) {
+ if (i < 10) {
+ data.data1.push([i * 10, base += 197 + random(3)]);
+ }
+ else if (i < 20) {
+ data.data1.push([i * 10, base -= 17 + random(3)]);
+ }
+ else if (i < 30) {
+ data.data1.push([i * 10, base += 3 + random(3)]);
+ }
+ else if (i < 40) {
+ data.data1.push([i * 10, base -= 5 + random(3)]);
+ }
+ else {
+ data.data1.push([i * 10, base += 157 + random(3)]);
+ }
}
+ return data;
}
- return data;
- }
- function random(max) {
- return +(Math.random() * max).toFixed(3);
- }
+ function random(max) {
+ return +(Math.random() * max).toFixed(3);
+ }
- var option = {
- tooltip: {
- trigger: 'axis'
- },
- xAxis: [{
- type: 'time',
- boundaryGap: false
- }],
- yAxis: [{
- type: 'value',
- name: 'Github Star'
- }],
- dataZoom: [{
- type: 'inside',
- filterMode: 'none',
- start: 5,
- end: 40
- }, {
- type: 'slider',
- filterMode: 'none',
- start: 5,
- end: 40
- }],
- series: [{
- type: 'line',
- name: 'Star',
- hoverAnimation: false,
- symbolSize: 25,
- sampling: 'average',
- // smooth: true,
- // symbol: 'none',
- data: makeSpecialTrendData().data1
- }]
- };
-
- chart = myChart = testHelper.create(echarts, 'main0', {
- title: 'Clips line and symbols (dataZoom.filterMode: "none")',
- option: option
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: [{
+ type: 'time',
+ boundaryGap: false
+ }],
+ yAxis: [{
+ type: 'value',
+ name: 'Github Star'
+ }],
+ dataZoom: [{
+ type: 'inside',
+ filterMode: 'none',
+ start: 5,
+ end: 40
+ }, {
+ type: 'slider',
+ filterMode: 'none',
+ start: 5,
+ end: 40
+ }],
+ series: [{
+ type: 'line',
+ name: 'Star',
+ hoverAnimation: false,
+ symbolSize: 25,
+ sampling: 'average',
+ // smooth: true,
+ // symbol: 'none',
+ data: makeSpecialTrendData().data1
+ }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main0', {
+ title: 'Clips line and symbols (dataZoom.filterMode:
"none")',
+ option: option
+ });
});
@@ -102,41 +105,45 @@
<script>
- option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['first', 'middle', 'last']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name:'邮件营销',
- type:'line',
- stack: '总量',
- symbolSize: 20,
- data:[120, 132, 101]
+
+ require(['echarts'], function (echarts) {
+ option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['first', 'middle', 'last']
},
- // {
- // name:'联盟广告',
- // type:'line',
- // stack: '总量',
- // symbolSize: 20,
- // data:[220, 182, 191]
- // }
- ]
- };
-
- chart = myChart = testHelper.create(echarts, 'main1', {
- title: 'The first and last symbols (on the edge) should be
displayed.',
- option: option
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name:'邮件营销',
+ type:'line',
+ stack: '总量',
+ symbolSize: 20,
+ data:[120, 132, 101]
+ },
+ // {
+ // name:'联盟广告',
+ // type:'line',
+ // stack: '总量',
+ // symbolSize: 20,
+ // data:[220, 182, 191]
+ // }
+ ]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main1', {
+ title: 'The first and last symbols (on the edge) should be
displayed (test with 1000px).',
+ option: option
+ });
+
});
@@ -154,6 +161,120 @@
+ <script>
+
+ require(['echarts'], function (echarts) {
+
+ var gridLeft = 50;
+ var gridRight = 20;
+ var option = {
+ tooltip : {
+ },
+ legend: {
+ },
+ dataZoom: [{
+ }, {
+ type: 'inside'
+ }],
+ grid: {
+ id: 'cartesian',
+ left: gridLeft,
+ right: gridRight
+ },
+ xAxis: {
+ min: 500,
+ max: 2000
+ },
+ yAxis: {
+ min: 0,
+ max: 200
+ },
+ series: [
+ {
+ type:'line',
+ symbolSize: 20,
+ encode: {
+ tooltip: [0, 1]
+ },
+ data:[{
+ value: [2000, 100],
+ itemStyle: {
+ color: 'red'
+ }
+ }, {
+ value: [1000, 200],
+ itemStyle: {
+ color: 'red'
+ }
+ }, {
+ value: [500, 0],
+ itemStyle: {
+ color: 'red'
+ }
+ }, {
+ value: [2001, 100],
+ itemStyle: {
+ color: 'green'
+ }
+ }]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'b', {
+ title: [
+ 'Three red symbol on grid edge should always be
displayed',
+ 'One green symbol out of the grid should not be
displayed',
+ '(Click the button to start resize.)'
+ ],
+ option: option,
+ button: {
+ text: 'Start Resize',
+ onclick: startResize
+ },
+ info: {
+ xAxis: option.xAxis,
+ yAxis: option.yAxis
+ }
+ });
+
+ var timer;
+
+ function startResize() {
+ timer && clearInterval(timer);
+
+ var delta = 3.3;
+ chart && (timer = setInterval(function () {
+ var width = chart.getWidth();
+ if (
+ (delta > 0 && gridRight > width - gridLeft - 10)
+ || (delta < 0 && gridRight < 10)
+ ) {
+ delta = -delta;
+ }
+
+ gridRight += delta;
+
+ chart.setOption({
+ animation: false,
+ grid: {
+ id: 'cartesian',
+ right: gridRight
+ }
+ });
+ }, 50));
+ }
+ });
+
+ </script>
+
+
+
+
+
+
+
+
</body>
--
To stop receiving notification emails like this one, please contact
sushu...@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
