【v5】颜色通道绑定字段生成多条折线 Tooltip 显示异常

[Deathsteps]

问题描述

颜色通道绑定字段生成多条折线 Tooltip 显示异常

期望结果

1. Tooltip 的 title 应该显示正确的序号，与 X 轴对齐，或与不设置 color encode 时一致。
2. Tooltip 的 name 应该显示正确，可以是不设置 color encode 时的简单重复，也可以合并同 name 项
3. Tooltip 的 hover 出现逻辑应该和不设置 color encode 时一致，或其它符合预期的行为

如何重现

官方示例修改

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

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

const data = [
  {
    "idx": 0,
    "number": 2445,
    "province": "四川省",
    "type": "number",
    "sub_type": "xx"
  },
  {
    "idx": 0,
    "number": 21094.69,
    "province": "四川省",
    "type": "price",
    "sub_type": "yy"
  },
   {
    "idx": 1,
    "number": 1244,
    "province": "四川省",
    "type": "number",
    "sub_type": "xx"
  },
  {
    "idx": 1,
    "number": 12756,
    "province": "四川省",
    "type": "price",
    "sub_type": "yy"
  },
  {
    "idx": 2,
    "number": 2244,
    "province": "四川省",
    "type": "number",
    "sub_type": "xx"
  },
  {
    "idx": 2,
    "number": 19756.88,
    "province": "四川省",
    "type": "price",
    "sub_type": "yy"
  },
  {
    "idx": 3,
    "number": 244,
    "province": "四川省",
    "type": "number",
    "sub_type": "xx"
  },
  {
    "idx": 4,
    "number": 1975,
    "province": "四川省",
    "type": "price",
    "sub_type": "yy"
  },
  {
    "idx": 4,
    "number": 4004,
    "province": "四川省",
    "type": "number",
    "sub_type": "xx"
  },
  {
    "idx": 4,
    "number": 3004,
    "province": "四川省",
    "type": "number",
    "sub_type": "yy"
  }
]

chart
  .line()
  .data(data)
  .encode('x', 'idx')
  .encode('y', 'number')
  .encode('color', 'type')
  .tooltip({
    items: [
      { field: 'number', name: 'number' },
      { field: 'province', name: 'province' },
      { field: 'sub_type', name: 'sub_type' },
    ]
  });

chart.render();
chart.interaction('tooltip', true);

额外信息

• G2 5.0.3

[pearmini]

这个例子挺好的：

1. title 问题是两条折线的数据点个数不一致导致的，price series idx 有 3，但是 number series 没有。（需要修复）
2. name 这个可以如下解决：

chart.interaction("tooltip", { groupName: false });

chart.render();

但还是内部需要处理排序问题（需要修复）：

3. @Deathsteps 这个地方除了展示内容的形式有区别，还有哪里不一致吗？

[Deathsteps]

1. 不是很清楚为什么 groupName 默认不是 false 的，最好说明一下 :)
2. 我看 groupName 关闭后，province 相同的还做了合并。逻辑上可以理解，但从截图看，它导致了同系列的数据不在一起（蓝绿点出现交替了），最好优化这块显示。

目前没有发现其它问题

[pearmini]

groupName 这个默认是 true 确实有点反直觉，可能还是要调整一下。