The issue has been closed

【v5】组合图在配置颜色通道时 Tooltip 显示异常 #4997

Deathsteps posted onGitHub

问题描述

双轴，柱线混合，柱配置 encode color 函数后，你 Tooltip 显示异常。

期望结果

Tooltip 显示 time 字段
系列字段应该不显示，或者按『系列：XXX』这种显示，或其它合理方式

如何重现

官方示例修改

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

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2 },
  { time: '10:15', call: 2, waiting: 6, people: 3 },
  { time: '10:20', call: 13, waiting: 2, people: 5 },
  { time: '10:25', call: 9, waiting: 9, people: 1 },
  { time: '10:30', call: 5, waiting: 2, people: 3 },
  { time: '10:35', call: 8, waiting: 2, people: 1 },
  { time: '10:40', call: 13, waiting: 1, people: 2 },
];

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

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .encode('color', (d) => d.call > 5 ? 'XXX' : 'YYY')
  .axis('y', { title: 'Waiting', style: { titleFill: '#5B8FF9' } })
  .tooltip({ channel: 'x', name: 'time' });

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('shape', 'smooth')
  .style('stroke', '#fdae6b')
  .style('lineWidth', 2)
  .scale('y', { independent: true })
  .axis('y', {
    position: 'right',
    grid: null,
    title: 'People',
    style: {
      titleFill: '#fdae6b',
    },
  })
  .tooltip({ channel: 'x', name: 'time' });

chart.render();

追加 tooltip 项，表现又不一样了，没有 Get 到错乱的根源

.tooltip({ channel: 'x', name: 'time' })
.tooltip({ field: 'call', name: 'call' });

额外信息

G2 5.0.4

设置 chart.interaction('tooltip', { groupName: false }) 可以暂时解决这个问题。目前 groupName 默认为 true 是因为如下系列折线图。

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

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

chart
  .line()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/indices.json',
  })
  .transform({ type: 'normalizeY', basis: 'first', groupBy: 'color' })
  .encode('x', (d) => new Date(d.Date))
  .encode('y', 'Close')
  .encode('color', 'Symbol')
  .scale('y', { type: 'log' })
  .axis('y', { title: '↑ Change in price (%)' })
  .label({
    text: 'Symbol',
    selector: 'last',
    style: {
      fontSize: 10,
    },
  })
  .tooltip({ channel: 'y', valueFormatter: '.1f' });

chart.render();

所以有折线图的例子一般不设置 groupName 为 false，item 的 name 就不会生效。

把 groupName 默认设置为 false 似乎好一点？

posted by pearmini almost 2 years ago

试了一下， groupName: false 确实解决了问题。我感觉在 tooltip 设置了具体的字段时，groupName 可以为 false；不设置的情况分组展示 y 轴值也是合理的。默认值可以再看看社区的反馈，文档在一些细节上说明还是不够的。

posted by Deathsteps almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

【v5】组合图在配置颜色通道时 Tooltip 显示异常 #4997

问题描述

期望结果

如何重现

额外信息

Company

Community

Support

Connect