VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
1.01k stars 72 forks source link

[Bug] totallabel can't config the padding of overlap rect size #3361

Open xile611 opened 3 weeks ago

xile611 commented 3 weeks ago

Version

1.12.9

Link to Minimal Reproduction

no need

Steps to Reproduce

const spec = {
  type: 'bar',
  width: 400,
  data: [
    {
      id: 'barData',
      values: [
        {
          State: 'WY',
          Age: 'Under 5 Years',
          Population: 25635
        },
        {
          State: 'WY',
          Age: '5 to 13 Years',
          Population: 1890
        },
        {
          State: 'WY',
          Age: '14 to 17 Years',
          Population: 9314
        },
        {
          State: 'DC',
          Age: 'Under 5 Years',
          Population: 30352
        },
        {
          State: 'DC',
          Age: '5 to 13 Years',
          Population: 20439
        },
        {
          State: 'DC',
          Age: '14 to 17 Years',
          Population: 10225
        },
        {
          State: 'VT',
          Age: 'Under 5 Years',
          Population: 38253
        },
        {
          State: 'VT',
          Age: '5 to 13 Years',
          Population: 42538
        },
        {
          State: 'VT',
          Age: '14 to 17 Years',
          Population: 15757
        },
        {
          State: 'ND',
          Age: 'Under 5 Years',
          Population: 51896
        },
        {
          State: 'ND',
          Age: '5 to 13 Years',
          Population: 67358
        },
        {
          State: 'ND',
          Age: '14 to 17 Years',
          Population: 18794
        },
        {
          State: 'AK',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK2',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK2',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK2',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK3',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK3',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK3',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK4',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK4',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK4',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK5',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK5',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK5',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK6',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK6',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK6',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK7',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK7',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK7',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK8',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK8',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK8',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK9',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK9',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK9',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK10',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK10',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK10',
          Age: '14 to 17 Years',
          Population: 22153
        },
        {
          State: 'AK11',
          Age: 'Under 5 Years',
          Population: 72083
        },
        {
          State: 'AK11',
          Age: '5 to 13 Years',
          Population: 85640
        },
        {
          State: 'AK11',
          Age: '14 to 17 Years',
          Population: 22153
        }
      ]
    }
  ],
  xField: 'State',
  yField: 'Population',
  seriesField: 'Age',
  percent: true,
  stack: true,
  legends: {
    visible: true
  },
  totalLabel: {
    visible: true,
      // size: {
      //   padding: {
      //     top: 20
      //   },
      // },
  },
  axes: [
    {
      innerOffset: {
        top: 20
      },
      orient: 'left',
      label: {
        formatMethod: val => {
          return `${(val * 100).toFixed(2)}%`;
        }
      }
    },
  ],
  tooltip: {
    mark: { visible: false }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

总计标签不希望展示在柱子内部,但是希望开启防重叠功能,现在存在一下问题:

  1. 总计标签不支持设置标签防重叠的大小 { size: { padding } }
  2. 总计标签的防重叠策略设置不生效,没法限制固定在“顶部”
  3. 文档中缺失overlap 相关配置 image

Expected Behavior

优化总计标签防重叠相关配置

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response