tooltip 是否支持自定义 marker？是否直接使用 legend 中的 itemMarker ？

[wangxingkang]

问题描述

需要实现如下的效果

重现链接

No response

重现步骤

No response

预期行为

No response

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[wangxingkang]

目前通过 register('symbol.{name}', ...); 已实现 legend 想要的效果

[totoago]

tooltip 不可以展示鼠标hover 当前点信息？

[wangxingkang]

目前应该是不支持的

[totoago]

g2/plot，2.4版本支持自定义

[hustcc]

可以参考这个 demo 去自定义：https://g2.antv.antgroup.com/zh/examples/component/tooltip/#tooltip-render

[totoago]

可以参考这个 demo 去自定义：https://g2.antv.antgroup.com/zh/examples/component/tooltip/#tooltip-render

不行的，试过那样写法。这样取每一条，算法都是集合 .tooltip( ( d, // 每一个数据项 index, // 索引 data, // 完整数据 column, // 通道 ) => ({ name: d.host, value: d.usage + 'm' }), );

按道理说，data[index],d其实应该是某一天数据，实际还是集合

[hustcc]

你的需求是什么？

[totoago]

你的需求是什么？

鼠标hover在某个节点，只展示对应节点name:value； 不是所有的，要的是下边这样效果； g2/plot

[hustcc]

G2Plot 的哪个 demo，地址发一下。

[hustcc]

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

chart
  .data(data)
  .encode('x', 'month')
  .encode('y', 'temperature')
  .encode('color', 'city')
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    nice: true,
  })
  .axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth').tooltip(false);

chart.point().encode('shape', 'point')

chart.render();

[totoago]

G2Plot 的哪个 demo，地址发一下。

[totoago]

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

chart
  .data(data)
  .encode('x', 'month')
  .encode('y', 'temperature')
  .encode('color', 'city')
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    nice: true,
  })
  .axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth').tooltip(false);

chart.point().encode('shape', 'point')

chart.render();

这个也是展示多个

[hustcc]

你没有复制我的代码，有点细微区别。就是使用 point 的 tooltip，不使用 line 的 tooltip。

[totoago]

chart.point().encode('shape', 'point'); 可以实现只展示一条，但不能自定义tooltip内容;多谢

[wangxingkang]

@totoago https://www.visactor.io/vchart/demo/line-chart/null-value-line 是不是这个效果 ，hover 不在点上 展示所有信息， hover 再点上展示当前信息

[CullenNg]

@totoago https://www.visactor.io/vchart/demo/line-chart/null-value-line 是不是这个效果 ，hover 不在点上 展示所有信息， hover 再点上展示当前信息

我也想出这个效果，这个目前G2里面能配置出来吗？

[totoago]

这是一封自动回复邮件。已经收到您的来信，我会尽快回复。