🐛 G2 图表的单元格显示 tooltip 会抛出 Error

duganlx commented 1 month ago

🏷 Version

Package	Version
@antv/s2	2.0.0-next.25
@antv/s2-react	2.0.0-next.24
@antv/s2-vue
@antv/g2	5.2.2

Sheet Type

[ ] PivotSheet
[x] TableSheet
[ ] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

我在明细表中的一个单元格中画了 G2 的图，用鼠标点击该单元时，不出现 tooltip 并且在控制台中会抛出 Error，如下图所示。

当在 s2Option 中将 tooltip 设置为不显示（tooltip:{enable: false}）时，就不会出现在控制台中出现该 Error 信息，所以我判断是 tooltip 显示时的问题。

⌨️ Code Snapshots

s2Options 和 SheetComponent 的配置内容、报错截图如下所示。

s2Options

class CustomDataCell extends DataCell {
  drawTextShape() {
    if (this.isMultiData()) {
      const rcd = this.getRenderChartData();
      if (Array.isArray(rcd)) {
        return drawCustomContent(this);
      }

      return null;
    }

    super.drawTextShape();
  }
}

s2Options= {
  width: 600,
  height: 400,
  seriesNumber: { enable: true, text: "序号" },
  tooltip: {
    enable: true,
  },
  frozen: {
    rowCount: 1,
  },
  style: {
    rowCell: {
      heightByField: {
        "0": 100,
      },
      height: 24,
    },
  },
  dataCell: (viewMeta: any, spreadsheet: any) => {
    return new CustomDataCell(viewMeta, spreadsheet);
  },
};

SheetComponent

<SheetComponent
  sheetType="table"
  dataCfg={s2DataConfig}
  options={s2Options}
  onDataCellRender={(cell) => {
    // 普通数值单元格正常展示
    if (!cell.isChartData()) {
      return;
    }

    // 获取 G2 渲染到 S2 单元格内所需配置
    const chartOptions = cell.getRenderChartOptions();

    renderToMountedElement(chartOptions, {
      // 指定渲染容器为当前单元格
      group: cell,
      // 根据渲染的图表, 自行选择 G2 library: https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib
      library: stdlib(),
    });
  }}
/>

控制台报错信息

控制台一共会出现四个报错信息

🔗 Reproduce Link

https://codesandbox.io/p/sandbox/s2-tooltip-bug-vhnv2s

🤔 Steps to Reproduce

点击 F12 打开 DevTools
鼠标移动到绘制了G2柱状图的单元格中并点击
观察控制台中的输出，能看到Error报错信息

😊 Expected Behavior

鼠标点击/鼠标移入带有G2绘制图的单元格时，在 DevTools 控制台中不出现任何错误信息

😅 Current Behavior

鼠标点击/鼠标移入带有G2绘制图的单元格时，在 DevTools 控制台中出现错误信息

💻 System information

Environment	Info
System	window 10
Browser	chrome: v127.0.6533.73

lijinke666 commented 4 weeks ago

感谢你详细的描述, 这里是没兼容到

明细表普通单元格点击 tooltip 展示的是自身的数值, 对于自身是图表的场景不应该渲染 tooltip, 这里是错误的把图表数据渲染在 Tooltip 的 JSX 中, 所以报错了

github-actions[bot] commented 4 weeks ago

你好 @duganlx，很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @duganlx, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

lijinke666 commented 3 weeks ago

:tada: This issue has been resolved in version @antv/s2-v2.0.0-next.27 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

antvis / S2