Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
KuduroJS opened this issue May 8, 2023 · 5 comments
Assignees

Comments

@KuduroJS
Copy link

KuduroJS commented May 8, 2023

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()
@pearmini pearmini added the V5 label May 8, 2023
@pearmini pearmini self-assigned this May 8, 2023
@pearmini
Copy link
Member

pearmini commented May 8, 2023

分面每个图的交互不应该应该通过 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();

@pearmini
Copy link
Member

pearmini commented May 8, 2023

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

@KuduroJS KuduroJS closed this as completed May 8, 2023
@KuduroJS
Copy link
Author

KuduroJS commented May 8, 2023

谢谢

@pearmini
Copy link
Member

pearmini commented May 8, 2023

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

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

@pearmini pearmini reopened this May 8, 2023
@pearmini pearmini added the Facet label Sep 6, 2023
@pearmini
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants