Ant Design Charts 踩坑

1. 要实现如下的效果

bar chart

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

{
  html:
xxx
}

查阅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]

实现下来真可谓一波三折

你可能感兴趣的:(Ant Design Charts 踩坑)