From 135bd56b34515462a1bbf3433a165c85ef9ef39f Mon Sep 17 00:00:00 2001 From: Weixing Zhang Date: Sat, 10 Mar 2018 17:45:30 +0800 Subject: [PATCH] fix: set min and max for interval is not work. Closed #57 --- demos/multiple.html | 10 +-- demos/ring.html | 64 +++++++++++++++++ package.json | 2 +- src/geom/base.js | 5 +- test/bug/issue-57-spec.js | 148 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 221 insertions(+), 8 deletions(-) create mode 100644 demos/ring.html create mode 100644 test/bug/issue-57-spec.js diff --git a/demos/multiple.html b/demos/multiple.html index a0723933c..e8456b373 100644 --- a/demos/multiple.html +++ b/demos/multiple.html @@ -30,14 +30,16 @@ chart.source(data, { tem: { - tickCount: 5, + min: 0, max: 30, - min: 0 + tickInterval: 10, + nice: false }, rain: { - tickCount: 5, min: 0, - max: 30 + max: 30, + tickInterval: 10, + nice: false } }); diff --git a/demos/ring.html b/demos/ring.html new file mode 100644 index 000000000..23caaa582 --- /dev/null +++ b/demos/ring.html @@ -0,0 +1,64 @@ + + + + + 环图 + + + +
+ + +
+ + + + + diff --git a/package.json b/package.json index 020902655..32222cae5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/f2", - "version": "3.1.1-beta.8", + "version": "3.1.1-beta.9", "description": "A canvas library which providing 2d draw for G2.", "keywords": [ "canvas", diff --git a/src/geom/base.js b/src/geom/base.js index fc7e6aa5c..e3a1180ad 100644 --- a/src/geom/base.js +++ b/src/geom/base.js @@ -168,13 +168,12 @@ class Geom extends Base { if (self.get('type') === 'interval') { // 柱状图起始点从0点开始 if (yScale.values.length) { yScale.change({ - min: Math.min(0, yScale.min), - max: Math.max.apply(null, yScale.values) + min: Math.min(0, yScale.min) }); } } // 饼图需要填充满整个空间 - if (coord.type === 'polar' && coord.transposed) { + if (coord.type === 'polar' && coord.transposed && self.hasAdjust('stack')) { if (yScale.values.length) { yScale.change({ nice: false, diff --git a/test/bug/issue-57-spec.js b/test/bug/issue-57-spec.js new file mode 100644 index 000000000..9e4b3d3b3 --- /dev/null +++ b/test/bug/issue-57-spec.js @@ -0,0 +1,148 @@ +const expect = require('chai').expect; + +const F2 = require('../../src/core'); +require('../../src/geom/interval'); +require('../../src/coord/polar'); // 极坐标系 +require('../../src/geom/adjust/stack'); +require('../../src/component/guide/arc'); +const Guide = require('../../src/plugin/guide'); + +const canvas = document.createElement('canvas'); +canvas.width = 500; +canvas.height = 500; +canvas.id = 'colDefs'; +document.body.appendChild(canvas); + +describe('colDefs', () => { + let chart; + let data; + + it('定义了 min 和 max 的柱状图', function() { + data = [ + { time: '周一', tem: 6.9, rain: 10 }, + { time: '周二', tem: 9.5, rain: 13 }, + { time: '周三', tem: 14.5, rain: 14 }, + { time: '周四', tem: 18.2, rain: 10 }, + { time: '周五', tem: 21.5, rain: 12 }, + { time: '周六', tem: 25.2, rain: 16 }, + { time: '周日', tem: 26.5, rain: 13 } + ]; + chart = new F2.Chart({ + id: 'colDefs', + pixelRatio: window.devicePixelRatio + }); + + chart.source(data, { + tem: { + min: 0, + max: 80 + } + }); + + // 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px) + chart.axis('time', { + label: { + fontSize: 14 + }, + grid: null + }); + chart.axis('tem', { + label: { + fontSize: 14 + } + }); + chart.axis('rain', { + label: { + fontSize: 14 + } + }); + chart.interval().position('time*tem'); + chart.render(); + + const yScale = chart.getYScales()[0]; + expect(yScale.min).to.equal(0); + expect(yScale.max).to.equal(80); + chart.destroy(); + }); + + it('设置了 max 的极坐标转置下的柱状图', function() { + data = [ + { x: '1', y: 85 } + ]; + chart = new F2.Chart({ + id: 'colDefs', + pixelRatio: window.devicePixelRatio, + plugins: Guide + }); + chart.source(data, { + y: { + max: 100, + min: 0 + } + }); + chart.axis(false); + chart.coord('polar', { + transposed: true, + innerRadius: 0.8 + }); + chart.guide().arc({ + start: [ 0, 0 ], + end: [ 1, 99.98 ], + top: false, + style: { + lineWidth: 20, + stroke: '#ccc' + } + }); + chart.interval() + .position('x*y') + .size(20) + .animate({ + appear: { + duration: 1500 + } + }); + chart.render(); + const yScale = chart.getYScales()[0]; + expect(yScale.min).to.equal(0); + expect(yScale.max).to.equal(100); + chart.destroy(); + }); + + it('饼图设置了 max', function() { + data = [ + { a: '1', b: 0.3, c: '1' }, + { a: '1', b: 0.3, c: '2' }, + { a: '1', b: 0.4, c: '3' } + ]; + + chart = new F2.Chart({ + id: 'colDefs', + pixelRatio: window.devicePixelRatio + }); + + chart.source(data, { + b: { + max: 100 + } + }); + + chart.coord('polar', { + transposed: true, + inner: 0 + }); + + chart.axis(false); + chart.interval() + .position('a*b') + .color('c') + .adjust('stack'); + chart.render(); + + const yScale = chart.getYScales()[0]; + expect(yScale.min).to.equal(0); + expect(yScale.max).to.equal(1); + chart.destroy(); + document.body.removeChild(canvas); + }); +});