antvis/G2

v5 地图如何自定义tooltip #6482

Stranded97 posted onGitHub

问题描述

使用geoView如何自定义tooltip,好像都没有tooltip配置选项,想使用chart.interaction('tooltip',()=>{})也没有效果

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


确实有点区别,因为 geo 相关的 mark 是符合了一个 geoView,所以自定义 tooltip 需要写到 mark 上,参考下面的 demo。

/**
 * A recreation of this demo: https://vega.github.io/vega-lite/examples/geo_choropleth.html
 */
import { Chart, register } from '@antv/g2';
import { feature } from 'topojson';

register('data.feature', ({ name }) => {
  return (data) => feature(data, data.objects[name]).features;
});

fetch('https://assets.antv.antgroup.com/g2/unemployment2.json')
  .then((res) => res.json())
  .then((data) => {
    const chart = new Chart({
      container: 'container',
      autoFit: true,
    });

    chart
      .geoPath()
      .coordinate({ type: 'albersUsa' })
      .data({
        type: 'fetch',
        value: 'https://assets.antv.antgroup.com/g2/us-10m.json',
        transform: [
          { type: 'feature', name: 'counties' },
          {
            type: 'join',
            join: data,
            on: ['id', 'id'],
            select: ['rate'],
          },
        ],
      })
      .scale('color', {
        palette: 'ylGnBu',
        unknown: '#fff',
      })
      .encode('color', 'rate')
      .legend({ color: { layout: { justifyContent: 'center' } } })
      .interaction('tooltip', {  // 👈🏻 这里
        render: () => 'abc'
      });

    chart.render();
  });
posted by hustcc 6 months ago

Fund this Issue

$0.00
Funded

Pull requests