antvis/G2

饼图在多个spider label的场景下,即便设置了overlapDodgeY,label一样会碰撞 #6480

Amaz-Ning posted onGitHub

问题描述

饼图在多个spider label的场景下,即便设置了overlapDodgeY,label一样会碰撞

重现链接

No response

重现步骤

`const data = [ { item: '事例一', count: 40, percent: 0.01 }, { item: '事例二', count: 21, percent: 0.01 }, { item: '事例三', count: 17, percent: 0.01 }, { item: '事例四', count: 13, percent: 0.01 }, { item: '事例五', count: 9, percent: 0.96 }, ];

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

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

chart .interval() .data(data) .transform({ type: 'stackY' }) .encode('y', 'percent') .encode('color', 'item') .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } }) .label({ transform: [ { type: 'overlapDodgeY', }, ], position: 'spider', text: (data) => 111111111111111, }) .label({ transform: [ { type: 'overlapDodgeY', }, ], style: { dy: 10, fill: 'red' }, position: 'spider', text: (data) => 222222222222222, }) chart.render();`

官网示例,添加多个label

预期行为

预期不碰撞,实际碰撞

平台

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

屏幕截图或视频(可选)

image

补充说明(可选)

No response


多个 spider label 确实无法处理,为啥会需要多个呢?直接在一个 label 里面用文本换行即可。 \n 就行。

posted by hustcc 6 months ago

多个 spider label 确实无法处理,为啥会需要多个呢?直接在一个 label 里面用文本换行即可。 \n 就行。

因为需求是要展示两行不同的数据,且样式是不一样的。如果单纯用\n换行的话不能单独修改第二行的样式

posted by Amaz-Ning 6 months ago

Fund this Issue

$0.00
Funded

Pull requests