diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts index 188b96605b..d652cd608c 100644 --- a/packages/s2-core/src/facet/base-facet.ts +++ b/packages/s2-core/src/facet/base-facet.ts @@ -1278,10 +1278,8 @@ export abstract class BaseFacet { addDataCell = (cell: DataCell) => { this.panelScrollGroup?.appendChild(cell); - setTimeout(() => { - this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell); - this.spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); - }, 50); + this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell); + this.spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell); }; realDataCellRender = (scrollX: number, scrollY: number) => { diff --git a/packages/s2-react/playground/components/ChartSheet.tsx b/packages/s2-react/playground/components/ChartSheet.tsx index 7816e9b1de..986bf78ad4 100644 --- a/packages/s2-react/playground/components/ChartSheet.tsx +++ b/packages/s2-react/playground/components/ChartSheet.tsx @@ -32,6 +32,11 @@ const options: SheetComponentOptions = { }; const onDataCellRender: SheetComponentsProps['onDataCellRender'] = (cell) => { + // 普通数值单元格正常展示 + if (!cell.isChartData()) { + return; + } + const chartOptions = cell.getRenderChartOptions(); // https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib diff --git a/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md index 7ede43469d..654d494468 100644 --- a/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md +++ b/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md @@ -118,6 +118,11 @@ s2.render(); ```ts s2.on(S2Event.DATA_CELL_RENDER, (cell) => { + // 如果是普通数值单元格正常展示 + if (!cell.isChartData()) { + return; + } + const chartOptions = cell.getRenderChartOptions(); renderToMountedElement(chartOptions, { @@ -138,6 +143,11 @@ import { renderToMountedElement, stdlib } from '@antv/g2'; function App() { const onDataCellRender = (cell) => { + // 如果是普通数值单元格正常展示 + if (!cell.isChartData()) { + return; + } + const chartOptions = cell.getRenderChartOptions(); renderToMountedElement(chartOptions, { diff --git a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts index 69efde673b..7a8b264344 100644 --- a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts +++ b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts @@ -124,6 +124,11 @@ const s2 = new PivotSheet(container, s2DataConfig, s2Options); // 监听数值单元格渲染完成后, 使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上 s2.on(S2Event.DATA_CELL_RENDER, (cell) => { + // 普通数值单元格正常展示 + if (!cell.isChartData()) { + return; + } + // 获取 G2 渲染到 S2 单元格内所需配置 const chartOptions = cell.getRenderChartOptions();