如何调整ZingChart图例提示框实现文本自动换行并自适应高度?
解决ZingChart图例提示框自动换行及高度自适应问题
你需要修改以下3处配置来实现提示框文本自动换行并自适应高度:
- 修复引号语法错误:原代码中
max-width使用了中文双引号,需改为英文双引号(JSON语法要求) - 开启文本自动换行:添加
'wrap-text': true配置,强制文本在达到max-width限制时自动换行 - 优化多行可读性(可选):添加
'line-height'配置,调整多行文本的行间距
修改后的完整tooltip配置
tooltip: { text: "%t was performed by %plot-description.", 'background-color': "#ffe6e6", 'font-color': "red", 'font-family': "Georgia", 'border-width': 1, 'border-color': "red", 'border-radius': "5px", "max-width": "170px", // 修复为英文双引号 'wrap-text': true, // 新增:开启自动换行逻辑 'line-height': 1.4 // 可选:优化多行文本行间距 },
关键说明
wrap-text: true是实现自动换行的核心开关,ZingChart默认不会自动换行长文本,必须手动开启- 引号语法错误会导致
max-width配置失效,这是容易忽略的基础问题 - 行间距配置可根据视觉需求调整数值,让多行提示文本更易阅读
内容的提问来源于stack exchange,提问作者DaveR
相关产品推荐
相关产品推荐

