antvis / S2

⚡️ A practical visualization library for tabular analysis.
https://s2.antv.antgroup.com
MIT License
1.46k stars 193 forks source link

S2中明细表或者透视表设置背景柱状图最小值不生效?🐛 #2819

Closed Zhaohanqi12 closed 2 months ago

Zhaohanqi12 commented 2 months ago

🏷 Version

S2中明细表或者透视表设置背景柱状图最小的那个值无论是多少背景柱状图都不生效?

Package Version
@antv/s2 1.5.0
@antv/s2-react 1.3.3

Sheet Type

🖋 Description

⌨️ Code Snapshots

🔗 Reproduce Link

image 复现demo地址 https://codesandbox.io/p/sandbox/flamboyant-greider-z9zhfg?file=%2Fsrc%2Findex.ts%3A27%2C17

lijinke666 commented 2 months ago

是的, 因为需要考虑双向柱状图, 数值可能为负数, 所以基准值不是从 0 开始的, 而是你的数据最小值, 此时 1220 等价, 所以看起来不生效, 你可以手动设置 minValue0

      {
        field: "number",
        mapping(value, record, cell) {
          const defaultValueRange = cell.valueRangeByField;

          return {
            fill: "#80BFFF",
            isCompare: true,
            minValue: 0,
            maxValue: defaultValueRange.maxValue,
          };
        },
      },
Zhaohanqi12 commented 2 months ago

在1x版本中如何获取最大值maxValue,而且我要做成动态的,就是有双向柱状图就正常展示负方向的,没有的话就按0作为最小值?

------------------ 原始邮件 ------------------ 发件人: "Jinke @.>; 发送时间: 2024年7月15日(星期一) 下午3:16 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [antvis/S2] S2中明细表或者透视表设置背景柱状图最小值不生效?🐛 (Issue #2819)

是的, 因为需要考虑双向柱状图, 基准值不是从 0 开始的, 而是你的数据最小值, 你可以手动设置 minValue 为 0 { field: "number", mapping(value, record, cell) { const defaultValueRange = cell.valueRangeByField; return { fill: "#80BFFF", isCompare: true, minValue: 0, maxValue: defaultValueRange.maxValue, }; }, },

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

lijinke666 commented 2 months ago

cell.valueRangeByField 不就能获取最大值和最小值吗, 两个版本一样的, 你动态判断最小值是不是负数, 动态改变 isCompare 不就行了

Zhaohanqi12 commented 2 months ago

mapping的第三个参数cell为undefined?

------------------ 原始邮件 ------------------ 发件人: "Jinke @.>; 发送时间: 2024年7月15日(星期一) 下午3:52 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [antvis/S2] S2中明细表或者透视表设置背景柱状图最小值不生效?🐛 (Issue #2819)

cell.valueRangeByField 不就能获取最大值和最小值吗, 两个版本一样的, 你动态判断最小值是不是负数, 动态改变 isCompare 不就行了

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

lijinke666 commented 2 months ago

哦哦, 1.x 版本没有传入第三个参数, 你是两个版本都在用? 你提供的 demo 又是 2.x 版本的

Zhaohanqi12 commented 2 months ago

是的呢,之前的一个项目依赖于1X,现在遇到了这个问题,因为这个配置不只是一个表格再用,是一个动态给所有表格配置的,所以有无负数都要考虑到。

------------------ 原始邮件 ------------------ 发件人: "Jinke @.>; 发送时间: 2024年7月15日(星期一) 下午3:58 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [antvis/S2] S2中明细表或者透视表设置背景柱状图最小值不生效?🐛 (Issue #2819)

哦哦, 1.x 版本没有传入第三个参数, 你是两个版本都在用? 你提供的 demo 又是 2.x 版本的

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

lijinke666 commented 2 months ago

1.x 版本中这样改写一下吧, 自定义 dataCell 重写 mappingValue, 额外注入第三个参数, mapping 使用方式不变

https://github.com/antvis/S2/blob/bbea2e7d6d767b1220baef0a523ed3df22a1bf01/packages/s2-core/src/cell/data-cell.ts#L465-L473

import { DataCell } from '@antv/s2'

class CustomDataCell extends DataCell {
  mappingValue(condition) {
    const value = this.meta.fieldValue
    const rowDataInfo = this.spreadsheet.isTableMode()
      ? this.spreadsheet.dataSet.getCellData({
          query: { rowIndex: this.meta.rowIndex },
        })
      : this.meta.data;

    // 注入第三个参数
    return condition?.mapping(value, rowDataInfo, this);
  }
}

const s2Options = {
  dataCell: (viewMeta) => new CustomDataCell(viewMeta, viewMeta?.spreadsheet),
}
lijinke666 commented 2 months ago

PS:

valueRangeByField 这块缺失文档, 2.x 后续版本中应该会将 cell.valueRangeByField 改成 cell.getValueRange(), 后续如果升级了版本请注意.

Zhaohanqi12 commented 2 months ago

谢谢,已解决

------------------ 原始邮件 ------------------ 发件人: "Jinke @.>; 发送时间: 2024年7月15日(星期一) 下午4:09 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [antvis/S2] S2中明细表或者透视表设置背景柱状图最小值不生效?🐛 (Issue #2819)

PS:

valueRangeByField 这块缺失文档, 2.x 后续版本中应该会将 cell.valueRangeByField 改成 cell.getValueRange(), 后续如果升级了版本请注意.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>