🙏希望能支持单元格内容自定义渲染

[DantinZhang]

Describe the feature / 功能描述

单元格支持自定义渲染，如自定义图片、链接、衍生指标同环比、图文混排等信息的自定义展示
参考示例
现状：貌似没有该功能

Design the API / API 设计

name	type	default	description
customRender	-	-	-

Are you willing to contribute? / 是否愿意参与贡献？

❌ No / 否

[petercat-assistant]

感谢您提出这个功能请求。您希望在 antvis/S2 中支持单元格内容自定义渲染，以便能够自定义图片、链接、衍生指标同环比、图文混排等信息的展示。目前看来，S2 似乎还不具备此功能。

您的请求已经被记录下来，开发团队会考虑在未来的版本中加入该功能。感谢您的反馈！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[github-actions]

你好 @DantinZhang:

提 Issue 须知

⚠️ 在提出问题前，请确保你已经仔细阅读👓/搜索🔍过 官方文档 和 常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表 和 Discussions 列表. 当你确定自己的问题没有解决方案时，请提交 issue。 ⚠️

如果是使用问题，不知道怎么用，移步 Discussions 讨论区 并提供 有效信息 进行 提问。

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 Issues 和 Discussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南)，帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.

[Alexzjt]

@DantinZhang 看下这个是不是你想要的
https://s2.antv.antgroup.com/manual/advanced/chart-in-cell

[Alexzjt]

单元格内渲染图片

import { Image } from '@antv/g';
import {
  CellClipBox,
  DataCell,
  PivotSheet,
  S2DataConfig,
  S2Options,
} from '@antv/s2';

class CustomDataCell extends DataCell {
  drawTextShape() {
    const text = this.getFieldValue()!.toString();
    const { x, y } = this.getBBoxByType(CellClipBox.CONTENT_BOX);

    if (text.startsWith('http')) {
      // 参考 https://g.antv.antgroup.com/api/basic/image
      const img = new Image({
        style: {
          x,
          y,
          keepAspectRatio: true,
          width: 35,
          src: text,
        },
      });

      this.appendChild(img);

      return;
    }

    super.drawTextShape();
  }
}

async function render(data) {
  const container = document.getElementById('root');

  const s2DataConfig: S2DataConfig = {
    fields: {
      columns: ['lang'],
      rows: ['category', 'title'],
      values: ['icon', 'slogan', 'description'],
      valueInCols: true,
    },
    data,
    meta: [
      {
        field: 'lang',
        name: '语言',
      },
      {
        field: 'category',
        name: '分类',
      },
      {
        field: 'title',
        name: '产品名称',
      },
      {
        field: 'icon',
        name: '图标',
      },
      {
        field: 'slogan',
        name: '宣传语',
      },
    ],
  };

  const s2Options: S2Options = {
    width: 1000,
    height: 480,
    hierarchyType: 'grid',
    style: {
      dataCell: {
        height: 50,
      },
      rowCell: {
        width: 100,
      },
    },
    dataCell: (viewMeta, spreadsheet) => {
      return new CustomDataCell(viewMeta, spreadsheet);
    },
  };

  const s2 = new PivotSheet(container, s2DataConfig, s2Options);

  await s2.render();
}

fetch('https://assets.antv.antgroup.com/antv/products.json')
  .then((res) => res.json())
  .then((data) => {
    render(data);
  });

[Alexzjt]

通过G的HTML标签自定义渲染视频、富文本

import { HTML } from '@antv/g';
import {
  CellClipBox,
  DataCell,
  S2DataConfig,
  S2Options,
  TableSheet,
} from '@antv/s2';

const size = 450;

class CustomDataCell extends DataCell {
  drawTextShape() {
    const text = this.getFieldValue()!.toString();
    const { x, y } = this.getBBoxByType(CellClipBox.CONTENT_BOX);
    let innerHTML;

    if (text.startsWith('http')) {
      innerHTML = `<video width="${size}" height="${size}" src="${text}" loop autoplay crossOrigin controls="false" muted></video>`;
    } else {
      innerHTML = text;
    }

    const html = new HTML({
      style: {
        x,
        y,
        width: size,
        height: size,
        innerHTML,
        'pointer-events': 'auto',   // 需要显式声明才能让HTML事件有效
      },
    });

    this.appendChild(html);
  }
}

async function render(data) {
  const container = document.getElementById('root');

  const s2DataConfig: S2DataConfig = {
    fields: {
      columns: ['src', 'desc'],
    },
    data,
  };

  const s2Options: S2Options = {
    width: 1000,
    height: 1000,
    style: {
      dataCell: {
        height: 500,
      },
    },
    dataCell: (viewMeta, spreadsheet) => {
      return new CustomDataCell(viewMeta, spreadsheet);
    },
  };

  const s2 = new TableSheet(container, s2DataConfig, s2Options);

  await s2.render();
}

const data = [
  {
    src: `https://gw.alipayobjects.com/v/rms_6ae20b/afts/video/A*VD0TTbZB9WMAAAAAAAAAAAAAARQnAQ/720P`,
    desc: `<h3>动画片</h3>`,
  },
  {
    src: `https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/file/A*EZfPRJqzl4cAAAAAAAAAAAAAARQnAQ`,
    desc: `<p>复制</p>
            <p>导出</p>`,
  },
  {
    src: `https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/wg8jTrLg-3EAAAAAAAAAAAAAK4eUAQBr`,
    desc: `<b>3D</b>大图`,
  },
  {
    src: `https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/l9viS4v0-fgAAAAAAAAAAAAAK4eUAQBr`,
    desc: `<span style="color: red">超强性能</span>`,
  },
  {
    src: `https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/XHdUSp9rBo4AAAAAAAAAAAAAK4eUAQBr`,
    desc: `
    <h1>欢迎来到富文本示例页面</h1>
    <p>这是一个包含富文本元素的示例页面，您可以看到不同类型的内容。</p>
    <h2>表格示例</h2>
    <table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>28</td>
                <td>广州</td>
            </tr>
        </tbody>
    </table>
`,
  },
  {
    src: `https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/StguTYJvYQMAAAAAAAAAAAAAVoeUAQBr`,
    desc: `<div style="display: flex; column-gap: 8px">
    <a href="https://antv.antgroup.com/" target="_blank" rel="noreferrer">antv</a>
    <a href="https://s2.antv.antgroup.com/" target="_blank" rel="noreferrer">antv/s2</a>
</div>`,
  },
];

render(data);

[Alexzjt]

除上述HTML方式外，链接也可以用：https://s2.antv.antgroup.com/manual/advanced/interaction/link-jump
衍生指标同环比：一般通过多个数值列实现

[DantinZhang]

感谢回复！您提到的大部分单元格自定义方式，如图片、链接、衍生指标同环比，我们都是按您的方式实现的，只是确实语法较为复杂。对于html的自定义，拖拽列宽时可能会有一些显示问题

ps：
希望能把自定义html作为一个参数，提供一个开箱即用的html渲染（要是能把相关事件监听器也暴露出来那更好了，比如单元格尺寸变化后图片尺寸自适应、单元格交互之类的，同时保留html的交互和动画）

如单元格渲染配置中新增回调函数，返回排版后的canvas元素、图片元素、url并应用到单元格绘制中。
interface S2Options {
    // ...
    customRender: {
        useCache: Boolean
        render(node: Node):
            false|{source: HtmlCanvasElement|Image|Url, height: number, width: number}
    }
}

[lijinke666]

🎉 This issue has been resolved in version @antv/s2-v2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀