【V5】Tooltip title 设置常量不生效

[BinghuiXie]

• G2 Version: 官网 Demo
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

V5 中 Tooltip 的 title 设置常量不生效，只有设置 datum 里面的属性才生效

import { Chart } from '@antv/g2';
const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});


chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .encode('x', 'letter')
  .encode('y', 'frequency')
  .axis('y', { labelFormatter: '.0%' })
  .tooltip({
    title: '12345678',
    items: [{ channel: 'x' }, { channel: 'y' }]
  });

chart.interaction('tooltip', {
  enterable: true
})

chart.render();

看了下代码感觉是这里有一些问题

// src/runtime/transform.ts
export function extractTooltip(
  I: number[],
  mark: G2Mark,
  context: TransformContext,
): [number[], G2Mark] {
  // ...
  const valueOf = (item) => {
    if (!item) return item;
    if (typeof item === 'string') {
      // 这里的 value 取的是 data 上面的属性，由于传入的 item 是常量，所以这里拿到的是 undefined
      return I.map((i) => ({ name: item, value: data[i][item] }))
    }
  // ...
}
// 导致在后面 initializeState 的时候，通过 titleOf 方法拿到的每个 element 上的 data 中的 title 就是 undefined
// src/runtime/plot.ts initializeState
function initializeState(
  // ...
) {
  // ...
  const titleOf = (i) => tooltip.title?.[i]?.value;
  // ...
  const visualData: Record<string, any>[] = I.map((d, i) => {
      const datum = {
        points: P[i],
        transform: T[i],
        index: d,
        markKey,
        viewKey: key,
        ...(tooltip && {
          // 这里拿到的 title 就是 undefined
          title: titleOf(d),
          items: itemsOf(d),
        }),
      };
  // ...
}

在最终绘制 Tooltip 的时候，会因为当前 hover 的 element 的数据中，title 为 undefined，而不展示提示框标题

[BinghuiXie]

plot.ts 里面有 valueOf 方法，是否可以复用该方法拿到 Tooltip 的 title？
因为在 label 的绘制逻辑里，text 字段就是通过 valueOf 来取值，在类型是 string 的时候，常量和数据属性都可以获取到

// runtime/plot.ts
function valueOf(
  value: Primitive | ((d: any, i: number, array: any) => any),
  datum: Record<string, any>,
  i: number,
  data: Record<string, any>,
) {
  if (typeof value === 'function') return value(datum, i, data);
  if (typeof value !== 'string') return value;
  if (datum[value] !== undefined) return datum[value];
  return value;
}

[pearmini]

可能也不能直接复用，但是可以修改成和上面方法相同的逻辑。

[pearmini]

目前可以通过 valueFormatter 实现该需求：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .encode('x', 'letter')
  .encode('y', 'frequency')
  .axis('y', { labelFormatter: '.0%' })
  .tooltip({
    title: { valueFormatter: () => '123' } // 这里
  })

chart.render();