Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] bar 系列支持堆叠柱整体圆角 #2185

Closed
zamhown opened this issue Jan 31, 2024 · 0 comments
Closed

[Feature] bar 系列支持堆叠柱整体圆角 #2185

zamhown opened this issue Jan 31, 2024 · 0 comments
Assignees
Milestone

Comments

@zamhown
Copy link
Member

zamhown commented Jan 31, 2024

类似于如下效果:
img_v3_027i_372b9588-0b76-416c-a435-b86fcdd5bffg

可以用以下 bar.style.cornerRadius 回调模拟,虽然在回调里不涉及具体数据,但是仍然和数据关联性较大,不好配 + 容易出 bug。可以考虑在系列中从图元层面添加圆角。

const spec = {
  type: 'bar',
  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
        }
      ]
    }
  ],
  xField: 'State',
  yField: 'Population',
  seriesField: 'Age',
  stack: true,
  legends: {
    visible: true
  },
  bar: {
    style: {
      cornerRadius: (data) => {
        const series = vchart.getChart().getAllSeries()[0];
        const statisticsData = series.getViewDataStatistics().latestData;
        const seriesField = series.getSeriesField();
        const seriesFieldValues = statisticsData[seriesField].values;
        if (data[seriesField] === seriesFieldValues[seriesFieldValues.length - 1]) {
          return [20, 20, 0, 0]
        }
        return 0
      }
    }
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
@zamhown zamhown added this to the v1.10.0 milestone Jan 31, 2024
@zamhown zamhown self-assigned this Jan 31, 2024
zamhown added a commit that referenced this issue Feb 18, 2024
…nfigure the corner radius of stacked bar groups, releated #2185
@zamhown zamhown mentioned this issue Feb 18, 2024
20 tasks
zamhown added a commit that referenced this issue Feb 20, 2024
…nfigure the corner radius of stacked bar groups, releated #2185
@zamhown zamhown closed this as completed Feb 21, 2024
xiaoluoHe pushed a commit that referenced this issue Feb 22, 2024
…nfigure the corner radius of stacked bar groups, releated #2185
xiaoluoHe pushed a commit that referenced this issue Feb 22, 2024
…nfigure the corner radius of stacked bar groups, releated #2185
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant