antvis/G2

label.render option causes the font to become bold #5390

jianjunyuu posted onGitHub

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 README 中的贡献帮助文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->

<!-- Enter your issue details below this comment. -->

这边使用g2 v5.0.18版本发现一个问题,使用了 label.render api后,窗口resize,label的dom数量线性递增,导致label展示文本效果是叠加的 文档地址:https://g2.antv.antgroup.com/spec/label/overview

这是初始化的文本: image

这是窗口变化后的效果 image

文本变粗了

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

const data = [ { action: '浏览网站', pv: 50000 }, { action: '放入购物车', pv: 35000 }, { action: '生成订单', pv: 25000 }, { action: '支付订单', pv: 15000 }, { action: '完成交易', pv: 8000 }, ];

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

chart.coordinate({ transform: [{ type: 'transpose' }], });

chart.data(data);

chart .interval() .encode('x', 'action') .encode('y', 'pv') .encode('color', 'action') .encode('shape', 'funnel') .transform({ type: 'symmetryY' }) .scale('x', { padding: 0 }) .animate('enter', { type: 'fadeIn' }) .label({ // text: (d) => ${d.action}\n${d.pv}, render: (t, d) => ${d.action}\n${d.pv}, position: 'inside', transform: [{ type: 'contrastReverse' }], }) .axis(false);

chart.render();


排查中了,原因是 resize 的时候重新渲染, html label 没有回收导致出现多个相同的 dom。

posted by hustcc over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests