Ant Design Charts 踩坑

1. 要实现如下的效果

bar chart

后面详情的部分不知道该如何实现到issue里提问
这种条形图 怎么配置?
按照提示操作应该选择html annotations,但是ant-design-charts文档不友好 只好翻看g2plot文档,借助图形标注展示总计 label annotations position很重要 我这里需要每行的详情标签都显示在最右边,则取里面的最大值去设置annotations position,但是设置html annotation 内存会溢出

{
  html:<div>xxx</div>
}

查阅issue How to show ant design icon inside an annotation of type html? 需要借助ReactDOM渲染dom,但是annotation会变形 不能完全展示,查阅issue则需要设置padding。
最外层的padding一开始以为四个值都要设置,

        padding: [0, 100,0,0]

这样左边的坐标标签就没了,可以只设置两个值,实现右侧有空余,坐标标签不被隐藏

        padding: [0, 100]

实现下来真可谓一波三折

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容