antvis/G2

饼图怎么支持排序 #6358

lvqingxiang posted onGitHub

问题描述

<img width="610" alt="截屏2024-07-15 14 00 46" src="https://github.com/user-attachments/assets/a8675b4d-c728-440c-b2d3-e8daafae84c7">

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

重现链接

No response

重现步骤

No response

预期行为

No response

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


可以给 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();
posted by pearmini 9 months ago

Fund this Issue

$0.00
Funded

Pull requests