The issue has been closed

分面的折线图和面积图，当设置了color通道，tooltip的name设置会失效。 #4954

KuduroJS posted onGitHub

E046510B-4D6A-40ec-A3DD-6AA143898F59

如图，tooltip的"apple"应显示为"label"

PS：不设置encode color时是正常的 PS：柱状图是正常的

测试代码：

/**
 * A recreation of one of these demos: https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot
 */
import { Chart } from '@antv/g2';
import { groupSort, median } from 'd3-array';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  height: 800,
  paddingLeft: 130,
  paddingRight: 120,
  paddingBottom: 60,
});


const data = [
  {
    date: '2023-03-13',
    company: 'apple',
    value: 1324
  },
  {
    date: '2023-03-14',
    company: 'apple',
    value: 8826
  },
  {
    date: '2023-03-15',
    company: 'apple',
    value: 12572
  },
  {
    date: '2023-03-13',
    company: 'google',
    value: 2394
  },
  {
    date: '2023-03-14',
    company: 'google',
    value: 4234
  },
  {
    date: '2023-03-15',
    company: 'google',
    value: 8875
  }
]

const facet = chart.facetRect().data(data).encode('y', 'company')

facet
  // .interval()
  // .line()
  .area()
  .encode('y', 'value')
  .encode('x', 'date')
  .encode('color', 'company')
  .axis('x', { title: false })
  .tooltip(() => {
    return { name: "label", value: 23 }
  })
  .attr('frame', false)
  .axis('y', { title: false, labelFormatter: '~s' })

chart.interaction('tooltip', {
  series: true,
  groupName: false
})


chart.render()

分面每个图的交互不应该应该通过 chart.interaction 声明，而是每个视图单独声明。

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


const chart = new Chart({
  container: 'container',
  theme: 'classic',
  height: 800,
  paddingLeft: 130,
  paddingRight: 120,
  paddingBottom: 60,
});

const data = [
  {
    date: '2023-03-13',
    company: 'apple',
    value: 1324,
  },
  {
    date: '2023-03-14',
    company: 'apple',
    value: 8826,
  },
  {
    date: '2023-03-15',
    company: 'apple',
    value: 12572,
  },
  {
    date: '2023-03-13',
    company: 'google',
    value: 2394,
  },
  {
    date: '2023-03-14',
    company: 'google',
    value: 4234,
  },
  {
    date: '2023-03-15',
    company: 'google',
    value: 8875,
  },
];

const facet = chart.facetRect().data(data).encode('y', 'company');

facet
  .area()
  .encode('y', 'value')
  .encode('x', 'date')
  .encode('color', 'company')
  .axis('x', { title: false })
  .tooltip({ field: 'value', name: 'label' })
  .attr('frame', false)
  .axis('y', { title: false, labelFormatter: '~s' })
  .interaction('tooltip', { // 这里声明
    groupName: false,
  });

chart.render();

posted by pearmini almost 2 years ago

但是这里声明了 tooltip 还需要声明 groupName 是不合理的，这里还是需要优化一下。

posted by pearmini almost 2 years ago

谢谢

posted by KuduroJS almost 2 years ago

但是这里声明了 tooltip 还需要声明 groupName 是不合理的，这里还是需要优化一下。

这个 issue 我先打开，等我把这个问题解决了再关闭。

posted by pearmini almost 2 years ago

目前开来设置 groupName 是最好的解法，所以先关闭了

posted by pearmini over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

分面的折线图和面积图，当设置了color通道，tooltip的name设置会失效。 #4954

Company

Community

Support

Connect