TUI Chart 工具提示(Tooltip)功能详解与实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00645/article/details/148505681

TUI Chart 工具提示(Tooltip)功能详解与实战指南

tui.chart 项目地址: https://gitcode.com/gh_mirrors/tui/tui.chart

什么是工具提示(Tooltip)

工具提示是数据可视化图表中常见的交互元素，当用户将鼠标悬停在图表数据点上时，会显示一个包含相关数据信息的浮动框。在TUI Chart项目中，工具提示功能设计得非常灵活，允许开发者通过多种方式自定义其外观和行为。

工具提示的基本结构

TUI Chart的工具提示由两个主要部分组成：

Header区域：显示数据的分类(category)信息
Body区域：显示具体的数据值(value)

这种结构设计使得数据展示层次分明，用户能够快速理解当前查看的数据点所属类别及其具体数值。

工具提示的核心配置选项

位置偏移控制(offsetX/offsetY)

通过offsetX和offsetY参数可以微调工具提示的显示位置：

const options = {
  tooltip: {
    offsetX: 30,   // 向右偏移30像素
    offsetY: -100  // 向上偏移100像素
  }
};

正值表示向右/下偏移
负值表示向左/上偏移
默认值均为0

这种精细的位置控制特别适合在复杂布局中避免工具提示与其他元素重叠。

数据格式化(Formatter)

formatter函数允许开发者自定义工具提示中数据的显示格式：

formatter: (value, tooltipDataInfo) => {
  // value: 原始数据值
  // tooltipDataInfo: 包含系列索引、颜色等元数据
  return `${value}℃`; // 示例：添加温度单位
}

实际应用场景可能包括：

添加单位符号(如℃、$等)
根据数值范围显示不同图标
数据舍入或格式化
本地化数字显示格式

完全自定义模板(Template)

对于需要高度定制化的场景，可以使用template选项完全重写工具提示的HTML结构：

template: (model, defaultTemplate, theme) => {
  // model: 包含所有数据点信息
  // defaultTemplate: 默认的header和body模板
  // theme: 当前主题设置
  return `<div class="custom-tooltip">...</div>`;
}

通过这个功能，开发者可以实现：

完全重新设计工具提示布局
添加额外的数据展示元素
集成第三方UI组件
实现复杂的交互效果

过渡动画(Transition)

工具提示的位置变化可以配置平滑的过渡动画：

transition: 'transform 0.5s ease-out'

支持所有CSS transition属性，常见用途包括：

调整动画持续时间
改变缓动函数
仅对特定属性应用动画

主题与样式定制

TUI Chart提供了全面的主题定制选项来控制工具提示的外观：

theme: {
  tooltip: {
    background: '#f0f0f0',
    borderColor: '#333',
    borderWidth: 2,
    borderRadius: 10,
    header: {
      fontSize: 14,
      fontWeight: 'bold'
    },
    body: {
      color: '#666'
    }
  }
}

可配置项包括：