From c595f94f54382e8bf1fdcc76e16328b60d98a6dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=AD=A6=E9=80=9A?= Date: Fri, 15 Mar 2024 11:29:17 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(dual-axes):=20=E8=A6=86=E5=86=99?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=87=AA=E9=80=82=E5=BA=94=E6=96=B9=E6=B3=95?= =?UTF-8?q?=EF=BC=8C=E4=BB=8E=E8=80=8C=E8=BE=BE=E6=88=90=E7=BC=A9=E7=95=A5?= =?UTF-8?q?=E8=BD=B4=E8=87=AA=E9=80=82=E5=BA=94=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plots/dual-axes/index.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/plots/dual-axes/index.ts b/src/plots/dual-axes/index.ts index 21f0c65736..9e74e7656a 100644 --- a/src/plots/dual-axes/index.ts +++ b/src/plots/dual-axes/index.ts @@ -26,4 +26,18 @@ export class DualAxes extends Plot { protected getSchemaAdaptor(): Adaptor { return adaptor; } + + /** + * 覆写父类的方法 + */ + protected triggerResize() { + if (!this.chart.destroyed) { + // 首先自适应容器的宽高 + this.chart.forceFit(); // g2 内部执行 changeSize，changeSize 中执行 render(true) + this.chart.clear(); + this.execAdaptor(); // 核心：宽高更新之后计算padding + // 渲染 + this.chart.render(true); + } + } } From 6e37470c903799b24dcfc581dd95c099e24cc742 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=AD=A6=E9=80=9A?= Date: Fri, 29 Mar 2024 14:29:32 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(dual-axes):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BC=A9=E7=95=A5=E8=BD=B4=E6=8B=96=E5=8A=A8=E6=97=B6=E5=80=99?= =?UTF-8?q?=E6=9F=B1=E7=BA=BF=E5=9B=BE=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/bugs/issue-3749-spec.ts | 53 ++++++++++++++++++++++++ src/plots/dual-axes/util/render-sider.ts | 4 +- 2 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 __tests__/bugs/issue-3749-spec.ts diff --git a/__tests__/bugs/issue-3749-spec.ts b/__tests__/bugs/issue-3749-spec.ts new file mode 100644 index 0000000000..3c23443ee3 --- /dev/null +++ b/__tests__/bugs/issue-3749-spec.ts @@ -0,0 +1,53 @@ +import { DualAxes } from '../../src'; +import { createDiv } from '../utils/dom'; + +describe('#3749', () => { + it('dual-axes', async () => { + const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:31', call: 6, waiting: 3, people: 4 }, + // { time: '10:32', call: 5, waiting: 3, people: 4 }, + // { time: '10:33', call: 5, waiting: 3, people: 4 }, + // { time: '10:34', call: 5, waiting: 3, people: 4 }, + // { time: '10:35', call: 5, waiting: 3, people: 4 }, + // { time: '10:36', call: 5, waiting: 3, people: 4 }, + // { time: '10:37', call: 5, waiting: 3, people: 4 }, + // { time: '10:38', call: 5, waiting: 3, people: 4 }, + // { time: '10:39', call: 5, waiting: 3, people: 4 }, + // { time: '10:40', call: 5, waiting: 3, people: 4 }, + // { time: '10:41', call: 5, waiting: 3, people: 4 }, + // { time: '10:42', call: 5, waiting: 3, people: 4 }, + // { time: '10:43', call: 5, waiting: 3, people: 4 }, + // { time: '10:44', call: 5, waiting: 3, people: 4 }, + ]; + + const dualAxes = new DualAxes(createDiv(), { + data: [data, data], + xField: 'time', + yField: ['waiting', 'people'], + slider: { + start: 0, + end: 1, + }, + tooltip: false, + geometryOptions: [ + { + geometry: 'column', + }, + { + geometry: 'line', + lineStyle: { + lineWidth: 2, + }, + }, + ], + }); + + dualAxes.render(); + console.log('dualAxes: ', dualAxes); + }); +}); diff --git a/src/plots/dual-axes/util/render-sider.ts b/src/plots/dual-axes/util/render-sider.ts index d8f89b1a65..be75e84e56 100644 --- a/src/plots/dual-axes/util/render-sider.ts +++ b/src/plots/dual-axes/util/render-sider.ts @@ -21,8 +21,8 @@ export const doSliderFilter = (view: View, sliderValue: [number, number]) => { const values = valuesOfKey(data, xScale.field); const xValues = isHorizontal ? values : values.reverse(); const xTickCount = size(xValues); - const minIndex = Math.floor(min * (xTickCount - 1)); - const maxIndex = Math.floor(max * (xTickCount - 1)); + const minIndex = Math.round(min * (xTickCount - 1)); + const maxIndex = Math.round(max * (xTickCount - 1)); // 增加 x 轴的过滤器 view.filter(xScale.field, (value: any) => {