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

饼图怎么支持排序 #6358

Closed
lvqingxiang opened this issue Jul 15, 2024 · 1 comment
Closed

饼图怎么支持排序 #6358

lvqingxiang opened this issue Jul 15, 2024 · 1 comment

Comments

@lvqingxiang
Copy link

lvqingxiang commented Jul 15, 2024

问题描述

截屏2024-07-15 14 00 46

现在饼图只能根据data展示,希望能有按照弧度的排序

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

@lvqingxiang lvqingxiang changed the title 饼图怎么支持 饼图怎么支持排序 Jul 15, 2024
@pearmini
Copy link
Member

可以给 stackY 加配置参数:

import { Chart } from '@antv/g2';

const data = [
  { item: '事例五', count: 9, percent: 0.09 },
  { item: '事例一', count: 40, percent: 0.4 },
  { item: '事例二', count: 21, percent: 0.21 },
  { item: '事例三', count: 17, percent: 0.17 },
  { item: '事例四', count: 13, percent: 0.13 },

];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.coordinate({ type: 'theta', outerRadius: 0.8 });

chart
  .interval()
  .data(data)
  .transform({ type: 'stackY', orderBy:'value', reverse:true }) // 这里
  .encode('y', 'percent')
  .encode('color', 'item')
  .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
  .label({
    position: 'outside',
    text: (data) => `${data.item}: ${data.percent * 100}%`,
  })
  .tooltip((data) => ({
    name: data.item,
    value: `${data.percent * 100}%`,
  }));

chart.render();

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

2 participants