antvis / antvis/G2

图例在右侧展示时,并且图例的字数比较多。当下次数据导入时图例的字数较少,会导致饼图往右偏移。这个能否优化一下呢。不管字数多少都不影响饼图的位置。

Open
#5,987 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

图例在右侧展示时,并且图例的字数比较多。当下次数据导入时图例的字数较少,会导致饼图往右偏移。这个能否优化一下呢。不管字数多少都不影响饼图的位置。
代码:
import { Pie } from '@antv/g2plot';

const data =[
{
"type": "分类一",
"value": 10,
"colorField": "JASJA难道你"
},
{
"type": "分类二",
"value": 20,
"colorField": "ASSJAJSJAJSJASJAJSJ"
},
{
"type": "分类三",
"value": 30,
"colorField": "JAJDSJAJD"
},
{
"type": "分类四",
"value": 40,
"colorField": "JAJSJA29392"
},
{
"type": "分类五",
"value": 50,
"colorField": 500
},
{
"type": "分类六",
"value": 60,
"colorField": 600
},
{
"type": "分类七",
"value": 70,
"colorField": 700
}
];

const piePlot = new Pie('container', {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'colorField',
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center',
},
},
interactions: [{ type: 'element-active' }],
});

piePlot.render();

### 重现链接

_No response_

### 重现步骤

_No response_

### 预期行为

_No response_

### 平台

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

### 屏幕截图或视频(可选)

_No response_

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied TypeScript Pie example in G2 with long and short right-side legend labels. Inspect the legend and pie layout calculation, then verify that changing label lengths between data imports does not move the pie horizontally.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.