• scale.tooltip.guide 配置：对应 chart.tooltip 配置

  • scale.tooltip encode 配置：对应 geometry.tooltip 配置

    相关设计

    回调参数

    1. chart.on('tooltip:change', (evt) => {
    2.  const { data } = evt;
    4.  // data 的结构如下截图
    5. });

    image.png

  1. // 基本结构
  2. type TooltipItem = {
  3.   color: string;
  4.   // title 可以不需要了
  5.   title?: string;
  6.   name?: string;
  7.   value?: string;
  8.   // x,y 相对于 plot 位置（coordinate）
  9.   x: number;
  10.   y: number;
  11. };
  13. type TooltipEventData = {
  14.   items: TooltipItem[];
  15.   title: string;
  16.   // x,y 相对于画布坐标位置
  17.   x: number;
  18.   y: number;
  19. };
  • 不管是哪种 Geometry，最终都转换为上述数据结构

案例验证

Tooltip in range interval

image.png

Tooltip in boxplot

image.png