antvis/G2

[V5] 多个marker tooltip 显示错误 #5343

HoneyPecanPie posted onGitHub

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 README 中的贡献帮助文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->

  • G2 Version: 5.0.16
  • Platform:
  • Mini Showcase(like screenshots):
  • CodePen Link:

<!-- Enter your issue details below this comment. -->

当存在多个mark时,tooltip的name显示错误: image 此图中有line和area,tooltip第一条name显示错误,value显示正确。

尝试修改name但不生效: image

复现代码:

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

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

chart
  .area()
  .data([{
    color: "#072AC8",
    date: "2023-06-25",
    series: "首次渲染耗时",
    value: 213
  }, {
    color: "#072AC8",
    date: "2023-06-26",
    series: "首次渲染耗时",
    value: 290
  }, {
    color: "#1565C0",
    date: "2023-06-25",
    series: "基础库生命周期执行耗时",
    value: 100
  }, {
    color: "#1565C0",
    date: "2023-06-26",
    series: "基础库生命周期执行耗时",
    value: 120
  }])
  .encode('x', 'date')
  .encode('y', 'value')
  .encode('series', 'series')
  .encode('color', 'series')
  .style('shape', 'smooth')
  .scale('color', {
    range: ['#072AC8', '#1565C0'],
  })
  .transform([{ type: 'stackY' }])

chart
  .line()
  .data([{
    color: "#4A90E2",
    date: "2023-06-25",
    series: "加载渲染耗时",
    value: 490
  },{
    color: "#4A90E2",
    date: "2023-06-26",
    series: "加载渲染耗时",
    value: 500
  }])
  .encode('x', 'date')
  .encode('y', 'value')
  .style('shape', 'smooth')
  .style('stroke', "#4A90E2")
  .tooltip(d=> ({
    name: d.series,
    value: d.value
  }))

chart.render();

加一句 chart.interaction('tooltip', { groupName: false }),然后自定义 area 的 tooltip item。

posted by pearmini over 1 year ago

https://g2.antv.antgroup.com/zh/examples/general/area#area-gradient @pearmini 这个是官方的面积图的demo,发现鼠标hover时也是有两个相同的tooltip的。是不是能提供方法修复一下。

我研究的结果是只要删除chart.area()chart.line()中相关的style函数的调用,就会显示一个tooltip了。 具体为什么style函数会影响到tooltip的展示就不清楚了。

posted by kaokei over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests