search

antvis / S2

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

🐛自定义mini图显示柱状图，当值都为正数时柱状图展示异常 #2822

Closed duganlx closed 3 months ago

duganlx commented 3 months ago

🏷 Version

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

Sheet Type

🖋 Description

“自定义 mini 图”展示柱状图时，如果值都为正数时，图展示异常，我使用antv官网图表实例举例，具体如下图所示。看着有点像是倒过来了（本来应该向上长的，结果是向下长）。

image

⌨️ Code Snapshots

复现很简单，打开 antv s2 文档 的 "自定义mini图"，然后将显示柱状图的数据改为全是正数即可。参考代码如下，一个是 JavaScript 一个是 Data

JavaScript
/* eslint-disable max-lines-per-function */
import {
  PivotSheet,
  DataCell,
  drawCustomContent,
  S2DataConfig,
  S2Options,
} from '@antv/s2';

/**
 * 自定义 DataCell，使用 drawCustomContent 绘制简易的 mini 图
 * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/data-cell.ts
 */
class CustomDataCell extends DataCell {
  // 当数值为对象时，完全接管绘制, 使用内置的 `drawCustomContent` 根据不同的数据结构 (见下方) 绘制不同的图形
  drawTextShape() {
    if (this.isMultiData()) {
      return drawCustomContent(this);
    }

    super.drawTextShape();
  }
}

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
)
  .then((res) => res.json())
  .then((res) => {
    const container = document.getElementById('container')!;
    const s2DataConfig: S2DataConfig = {
      fields: {
        rows: ['province', 'city'],
        columns: ['type', 'sub_type'],
        values: ['number'],
      },
      meta: res.meta,
      data: [
        // 用于绘制 mini 图的数据, 数据结构请查阅: https://s2.antv.antgroup.com/manual/basic/analysis/strategy#%E9%85%8D%E7%BD%AE-mini-%E5%9B%BE
        {
          province: '海南省',
          city: '三亚市',
          type: '家具',
          sub_type: '桌子',
          number: {
            // 折线图
            values: {
              type: 'line',
              data: [
                {
                  year: '2017',
                  value: -368,
                },
                {
                  year: '2018',
                  value: 368,
                },
                {
                  year: '2019',
                  value: 368,
                },
                {
                  year: '2020',
                  value: 368,
                },
                {
                  year: '2021',
                  value: 268,
                },
                {
                  year: '2022',
                  value: 168,
                },
              ],
              encode: { x: 'year', y: 'value' },
            },
          },
        },
        {
          province: '海南省',
          city: '三亚市',
          type: '家具',
          sub_type: '沙发',
          number: {
            // 柱状图
            values: {
              type: 'bar',
              data: [
                {
                  year: '2017',
                  value: 368,
                },
                {
                  year: '2018',
                  value: 328,
                },
                {
                  year: '2019',
                  value: 38,
                },
                {
                  year: '2020',
                  value: 168,
                },
                {
                  year: '2021',
                  value: 268,
                },
                {
                  year: '2022',
                  value: 368,
                },
              ],
              encode: { x: 'year', y: 'value' },
            },
          },
        },
        {
          province: '海南省',
          city: '三亚市',
          type: '办公用品',
          sub_type: '笔',
          number: {
            // 多列文本
            values: [
              [3877, -4324, '42%'],
              [3877, 4324, '-42%'],
            ],
          },
        },
        {
          province: '海南省',
          city: '三亚市',
          type: '办公用品',
          sub_type: '纸张',
          number: {
            // 子弹图
            values: {
              measure: 0.3,
              target: 0.76,
            },
          },
        },
        ...res.data,
      ],
    };

    const s2Options: S2Options = {
      width: 1000,
      height: 680,
      style: {
        dataCell: {
          height: 40,
        },
      },
      conditions: {
        text: [
          {
            field: 'number',
            mapping: (value, cellInfo) => {
              const { meta, colIndex } = cellInfo || {};

              if (colIndex === 0 || !value || !meta?.fieldValue) {
                return {
                  fill: '#000',
                };
              }

              return {
                fill: value > 0 ? '#FF4D4F' : '#29A294',
              };
            },
          },
        ],
      },
      dataCell: (viewMeta, spreadsheet) => {
        return new CustomDataCell(viewMeta, spreadsheet);
      },
    };

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

    s2.render();
  });
Data
{
  "meta": [
    {
      "field": "number",
      "name": "数量"
    },
    {
      "field": "province",
      "name": "省份"
    },
    {
      "field": "city",
      "name": "城市"
    },
    {
      "field": "type",
      "name": "类别"
    },
    {
      "field": "sub_type",
      "name": "子类别"
    }
  ],
  "data": [
    {
      "number": 7789,
      "province": "浙江省",
      "city": "杭州市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 2367,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 3877,
      "province": "浙江省",
      "city": "宁波市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 4342,
      "province": "浙江省",
      "city": "舟山市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 5343,
      "province": "浙江省",
      "city": "杭州市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 632,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 7234,
      "province": "浙江省",
      "city": "宁波市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 834,
      "province": "浙江省",
      "city": "舟山市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 945,
      "province": "浙江省",
      "city": "杭州市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 1304,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 1145,
      "province": "浙江省",
      "city": "宁波市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 1432,
      "province": "浙江省",
      "city": "舟山市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 1343,
      "province": "浙江省",
      "city": "杭州市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 1354,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 1523,
      "province": "浙江省",
      "city": "宁波市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 1634,
      "province": "浙江省",
      "city": "舟山市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 1723,
      "province": "四川省",
      "city": "成都市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 1822,
      "province": "四川省",
      "city": "绵阳市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 1943,
      "province": "四川省",
      "city": "南充市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 2330,
      "province": "四川省",
      "city": "乐山市",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 2451,
      "province": "四川省",
      "city": "成都市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 2244,
      "province": "四川省",
      "city": "绵阳市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 2333,
      "province": "四川省",
      "city": "南充市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 2445,
      "province": "四川省",
      "city": "乐山市",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 2335,
      "province": "四川省",
      "city": "成都市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 245,
      "province": "四川省",
      "city": "绵阳市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 2457,
      "province": "四川省",
      "city": "南充市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 2458,
      "province": "四川省",
      "city": "乐山市",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 4004,
      "province": "四川省",
      "city": "成都市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 3077,
      "province": "四川省",
      "city": "绵阳市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 3551,
      "province": "四川省",
      "city": "南充市",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 352,
      "province": "四川省",
      "city": "乐山市",
      "type": "办公用品",
      "sub_type": "纸张"
    }
  ],
  "totalData": [
    {
      "number": 26193,
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 49709,
      "type": "家具"
    },
    {
      "number": 23516,
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 29159,
      "type": "办公用品"
    },
    {
      "number": 12321,
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 16838,
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 18375,
      "province": "浙江省",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 14043,
      "province": "浙江省",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 4826,
      "province": "浙江省",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 5854,
      "province": "浙江省",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 7818,
      "province": "四川省",
      "type": "家具",
      "sub_type": "桌子"
    },
    {
      "number": 9473,
      "province": "四川省",
      "type": "家具",
      "sub_type": "沙发"
    },
    {
      "number": 7495,
      "province": "四川省",
      "type": "办公用品",
      "sub_type": "笔"
    },
    {
      "number": 10984,
      "province": "四川省",
      "type": "办公用品",
      "sub_type": "纸张"
    },
    {
      "number": 13132,
      "province": "浙江省",
      "city": "杭州市",
      "type": "家具"
    },
    {
      "number": 2288,
      "province": "浙江省",
      "city": "杭州市",
      "type": "办公用品"
    },
    {
      "number": 15420,
      "province": "浙江省",
      "city": "杭州市"
    },
    {
      "number": 2999,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "家具"
    },
    {
      "number": 2658,
      "province": "浙江省",
      "city": "绍兴市",
      "type": "办公用品"
    },
    {
      "number": 5657,
      "province": "浙江省",
      "city": "绍兴市"
    },
    {
      "number": 11111,
      "province": "浙江省",
      "city": "宁波市",
      "type": "家具"
    },
    {
      "number": 2668,
      "province": "浙江省",
      "city": "宁波市",
      "type": "办公用品"
    },
    {
      "number": 13779,
      "province": "浙江省",
      "city": "宁波市"
    },
    {
      "number": 5176,
      "province": "浙江省",
      "city": "舟山市",
      "type": "家具"
    },
    {
      "number": 3066,
      "province": "浙江省",
      "city": "舟山市",
      "type": "办公用品"
    },
    {
      "number": 8242,
      "province": "浙江省",
      "city": "舟山市"
    },
    {
      "number": 4174,
      "province": "四川省",
      "city": "成都市",
      "type": "家具"
    },
    {
      "number": 6339,
      "province": "四川省",
      "city": "成都市",
      "type": "办公用品"
    },
    {
      "number": 10513,
      "province": "四川省",
      "city": "成都市"
    },
    {
      "number": 4066,
      "province": "四川省",
      "city": "绵阳市",
      "type": "家具"
    },
    {
      "number": 3322,
      "province": "四川省",
      "city": "绵阳市",
      "type": "办公用品"
    },
    {
      "number": 7388,
      "province": "四川省",
      "city": "绵阳市"
    },
    {
      "number": 4276,
      "province": "四川省",
      "city": "南充市",
      "type": "家具"
    },
    {
      "number": 6008,
      "province": "四川省",
      "city": "南充市",
      "type": "办公用品"
    },
    {
      "number": 10284,
      "province": "四川省",
      "city": "南充市"
    },
    {
      "number": 4775,
      "province": "四川省",
      "city": "乐山市",
      "type": "家具"
    },
    {
      "number": 2810,
      "province": "四川省",
      "city": "乐山市",
      "type": "办公用品"
    },
    {
      "number": 7585,
      "province": "四川省",
      "city": "乐山市"
    },
    {
      "number": 32418,
      "province": "浙江省",
      "type": "家具"
    },
    {
      "number": 10680,
      "province": "浙江省",
      "type": "办公用品"
    },
    {
      "number": 43098,
      "province": "浙江省"
    },
    {
      "number": 17291,
      "province": "四川省",
      "type": "家具"
    },
    {
      "number": 18479,
      "province": "四川省",
      "type": "办公用品"
    },
    {
      "number": 35770,
      "province": "四川省"
    },
    {
      "number": 78868
    }
  ]
}

🔗 Reproduce Link

无

🤔 Steps to Reproduce

  1. 打开 antv s2 官网，选择“图表示例”中的“自定义mini图”，链接为：https://s2.antv.antgroup.com/examples/custom/custom-cell/#mini-chart
  2. 直接复制我在“⌨️ Code Snapshots”中提供的 JavaScript 和 Data 到 对应的Tab页中，如下图所示（或者直接对实例中将柱状mini图的数据改为正值） image
  3. 查看 横轴 “海南省/三亚市” 纵轴 “家具/沙发” 对应的单元格即可

😊 Expected Behavior

当数全为正时，应该是零轴在底部，柱子向上“伸长”的图 image

😅 Current Behavior

当前的行为就是 数全为正时，零轴在底部，而柱子是向下“伸长”的图（类似于数字全为负数的情况，但又不完全一样，因为如果数字全为负数，零轴应该在顶部）

💻 System information

Environment Info
System window 10
Browser chrome: v126.0.6478.127 (正式版本) (64位)
lijinke666 commented 2 months ago

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

The release is available on:

Your semantic-release bot :package::rocket: