You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 17:15:54