g2 自定义 tooltip

最新推荐文章于 2024-06-12 13:27:41 发布

real_忘川

最新推荐文章于 2024-06-12 13:27:41 发布

阅读量5k

点赞数 2

分类专栏： G2 文章标签： G2

本文链接：https://blog.youkuaiyun.com/qq_40755223/article/details/91790988

版权

在G2图表中自定义Tooltip的过程中，发现itemTpl只能部分定制，外框仍然受到containerTpl的影响。由于G2的文档不足且国内论坛资源稀缺，经过长时间摸索，最终在GitHub issue中找到解决方案。详情见：https://github.com/antvis/g2/issues/890

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

chart.tooltip({
                    showTitle: false,
                    containerTpl: '<div class="g2-tooltip">' + '<p class="g2-tooltip-title"></p>' + '<ul class="g2-tooltip-list"></ul>' + '</div>',
                    itemTpl: '<li class="g2-tooltip-list-item">'
                            + '<span class="g2-tooltip-marker" style="background-color:red;width:0px;height:0px;border-radius:50%;display:inline-block;margin-right:8px;"></span>'
                            + '{name}'
                            + '<span class="g2-tooltip-value"></span>'
                            + '</li>',
                    'g2-tooltip': {
                        position: 'absolute',

最低0.47元/天解锁文章