You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
------------------ 原始邮件 ------------------
发件人: "antvis/S2" ***@***.***>;
发送时间: 2024年9月19日(星期四) 中午11:47
***@***.***>;
***@***.******@***.***>;
主题: Re: [antvis/S2] 🐛透视表:自定义列头;合并的列头不显示排序图标,二级有排序图标但是没有排序效果 (Issue #2898)
目前自定义行列头不支持排序
二级列头会显示排序的图标,点击排序可以打开tooltip框,但是点击行内排序没有效果
这个排序图标不应该渲染出来, 是 BUG
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
🏷 Version
Sheet Type
🖋 Description
我使用的是s2-react和SheetComponent sheetType="pivot" react 透视表组件,不显示tooltip提示行内排序,点击现有的排序功能也无法进行排序
问题:透视表合并表头后,
合并成一级的列头都没有排序图标,所以不能点击显示tooltip和排序;
二级列头会显示排序的图标,点击排序可以打开tooltip框,但是点击行内排序没有效果
刚渲染的时候不会显示排序的Icon,只有自定义加上headerActionIcons才能显示出来排序的Icon,加入headerActionIcons后,会显示tooltip排序,但是没有排序效果,像图片中的这样,这个图片是在columns中设置的分组效果:
columns中设置代码,:
columns:[
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],
我不知道是哪个地方出问题了,链接中复现不出来,但是可以在 React自适应 图表实例中显示出来,效果和代码如下
// organize-imports-ignore
import React from 'react';
import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {
const data = [
{
'measure-1': 13,
'measure-2': 2,
type: '家具',
sub_type: '桌子',
},
{
'measure-1': 11,
'measure-2': 8,
type: '家具',
sub_type: '椅子',
},
{
'measure-1': 21,
'measure-2': 16,
type: '家具',
sub_type: '茶几',
},
];
const s2DataConfig: S2DataConfig = {
fields: {
columns: [
{
field: 'a-1',
title: '自定义节点 a-1',
description: 'a-1 描述',
children: [
{
field: 'a-1-1',
title: '自定义节点 a-1-1',
description: 'a-1-1 描述',
children: [
{
field: 'measure-1',
title: '指标 1',
description: '指标 1 描述',
children: [],
},
{
field: 'measure-2',
title: '指标 2',
description: '指标 2 描述',
children: [],
},
],
},
{
field: 'a-1-2',
title: '自定义节点 a-1-2',
description: 'a-1-2 描述',
children: [],
},
],
},
{
field: 'a-2',
title: '自定义节点 a-2',
description: 'a-2 描述',
children: [],
},
],
rows: ['type', 'sub_type'],
values: ['measure-1', 'measure-2'],
valueInCols: true,
},
data,
// 自定义节点默认使用
title
作为展示名, 也可以通过 meta 来统一进行格式化meta: [
{
field: 'type',
formatter: (value) => '商品类别',
},
{
field: 'sub_type',
formatter: (value) => '商品子类别',
},
{
field: 'a-1',
name: '角头1',
},
{
field: 'a-1-1',
name: '角头2',
},
// 自定义格式化数值
// {
// field: 'measure-1',
// formatter: (value, record, meta) =>
指标: ${value}
,// },
],
};
const s2Options: S2Options = {
width: 600,
height: 480,
hierarchyType: 'grid',
};
reactDOMClient.createRoot(document.getElementById('container')).render(
<SheetComponent
dataCfg={s2DataConfig}
options={s2Options}
adaptive={{
width: true,
height: false,
getContainer: () => document.getElementById('container'),
}}
/>,
);
});
我的预期效果是在以上的透视表代码中实现 一级列和二级列的排序效果,
⌨ Code Snapshots
🔗 Reproduce Link
🤔 Steps to Reproduce
😊 Expected Behavior
😅 Current Behavior
💻 System information
The text was updated successfully, but these errors were encountered: