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

问题描述

颜色通道绑定字段生成多条折线 Tooltip 显示异常 <img width="974" alt="image" src="https://user-images.githubusercontent.com/1549118/232404134-a1d99c55-f851-406a-8d1f-aae2646eed6c.png">

期望结果

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