tooltip 不显示 #5955

YY88Xu · 2023-12-20T02:38:41Z

问题描述

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

const chart = new Chart({ container: 'container' });

chart.data([{"Date":"2023年10月","value":"20231031","TotalHc":1716,"CurrentHc":5496,"HcPercent":320.28,"start":5496,"end":5384,"BackgroundCurrentHc":5496},{"Date":"2023年11月","value":"20231130","TotalHc":1739,"CurrentHc":5524,"HcPercent":317.65,"start":5524,"end":5412,"BackgroundCurrentHc":5524},{"Date":"2023年12月","value":"20231211","TotalHc":1746,"CurrentHc":5505,"HcPercent":315.29,"start":5505,"end":5393,"BackgroundCurrentHc":5505},{"Date":"2023年06月","value":"20230630","TotalHc":1724,"CurrentHc":5580,"HcPercent":323.67,"start":5580,"end":5468,"BackgroundCurrentHc":5580},{"Date":"2023年09月","value":"20230930","TotalHc":1716,"CurrentHc":5485,"HcPercent":319.64,"start":5485,"end":5373,"BackgroundCurrentHc":5485},{"Date":"2023年08月","value":"20230831","TotalHc":1710,"CurrentHc":5486,"HcPercent":320.82,"start":5486,"end":5374,"BackgroundCurrentHc":5486},{"Date":"2023年07月","value":"20230731","TotalHc":1729,"CurrentHc":5580,"HcPercent":322.73,"start":5580,"end":5468,"BackgroundCurrentHc":5580}])

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', 'BackgroundCurrentHc')
  .style('fill', 'gray')
  .encode('series', () => 'TotalHc')
  

// chart
//   .interval()
//   .encode('x', 'Date')
//   .encode('y', 'TotalHc')
//   .encode('series', () => 'TotalHc')

// chart
//   .interval()
//   .encode('x', 'Date')
//   .encode('y', ['end', 'start'])
//   .encode('series', () => 'TotalHc')

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', 'CurrentHc')
  .style('fill', 'pink')
  .encode('series', () => 'CurrentHc')

chart.interaction('elementHighlightByColor', { background: true })

chart.render();

hover 第一条灰色的柱子不出现 tooltip, hover 粉色柱子才出现 tooltip, 为啥

重现链接

No response

重现步骤

预期行为

No response

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

The text was updated successfully, but these errors were encountered:

pearmini · 2023-12-20T02:46:45Z

可能是一个 bug，可以暂时去掉：chart.interaction('elementHighlightByColor', { background: true })

YY88Xu · 2023-12-20T02:48:36Z

什么时候修复呢，产品就要这种 background: true 的效果额

YY88Xu · 2023-12-20T02:49:52Z

tooltip 是一方面的影响，点击事件也会受影响

    chart.on('element:click', e => {
      console.log(e.data.data) // 展示点击的数据
    })

也就是不显示 tooltip 点击柱状图也没有反应

pearmini · 2023-12-20T02:56:03Z

如果不是双轴图，更建议如下声明图表，就没有上面的问题了：

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

const chart = new Chart({ container: 'container' });

const data = [
  {
    Date: '2023年10月',
    value: '20231031',
    TotalHc: 1716,
    CurrentHc: 5496,
    HcPercent: 320.28,
    start: 5496,
    end: 5384,
    BackgroundCurrentHc: 5496,
  },
  {
    Date: '2023年11月',
    value: '20231130',
    TotalHc: 1739,
    CurrentHc: 5524,
    HcPercent: 317.65,
    start: 5524,
    end: 5412,
    BackgroundCurrentHc: 5524,
  },
  {
    Date: '2023年12月',
    value: '20231211',
    TotalHc: 1746,
    CurrentHc: 5505,
    HcPercent: 315.29,
    start: 5505,
    end: 5393,
    BackgroundCurrentHc: 5505,
  },
  {
    Date: '2023年06月',
    value: '20230630',
    TotalHc: 1724,
    CurrentHc: 5580,
    HcPercent: 323.67,
    start: 5580,
    end: 5468,
    BackgroundCurrentHc: 5580,
  },
  {
    Date: '2023年09月',
    value: '20230930',
    TotalHc: 1716,
    CurrentHc: 5485,
    HcPercent: 319.64,
    start: 5485,
    end: 5373,
    BackgroundCurrentHc: 5485,
  },
  {
    Date: '2023年08月',
    value: '20230831',
    TotalHc: 1710,
    CurrentHc: 5486,
    HcPercent: 320.82,
    start: 5486,
    end: 5374,
    BackgroundCurrentHc: 5486,
  },
  {
    Date: '2023年07月',
    value: '20230731',
    TotalHc: 1729,
    CurrentHc: 5580,
    HcPercent: 322.73,
    start: 5580,
    end: 5468,
    BackgroundCurrentHc: 5580,
  },
];

chart
  .interval()
  .data({
    value: data,
    transform: [
      {
        type: 'fold',
        fields: ['BackgroundCurrentHc', 'CurrentHc'],
        key: 'type',
        value: 'value',
      },
    ],
  })
  .encode('x', 'Date')
  .encode('y', 'value')
  .encode('color', 'type')
  .transform({type:'dodgeX'});

chart.interaction('elementHighlightByColor', { background: true })

chart.render();

YY88Xu · 2023-12-20T03:37:51Z

如果不是双轴图，更建议如下声明图表，就没有上面的问题了：

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

const chart = new Chart({ container: 'container' });

const data = [
  {
    Date: '2023年10月',
    value: '20231031',
    TotalHc: 1716,
    CurrentHc: 5496,
    HcPercent: 320.28,
    start: 5496,
    end: 5384,
    BackgroundCurrentHc: 5496,
  },
  {
    Date: '2023年11月',
    value: '20231130',
    TotalHc: 1739,
    CurrentHc: 5524,
    HcPercent: 317.65,
    start: 5524,
    end: 5412,
    BackgroundCurrentHc: 5524,
  },
  {
    Date: '2023年12月',
    value: '20231211',
    TotalHc: 1746,
    CurrentHc: 5505,
    HcPercent: 315.29,
    start: 5505,
    end: 5393,
    BackgroundCurrentHc: 5505,
  },
  {
    Date: '2023年06月',
    value: '20230630',
    TotalHc: 1724,
    CurrentHc: 5580,
    HcPercent: 323.67,
    start: 5580,
    end: 5468,
    BackgroundCurrentHc: 5580,
  },
  {
    Date: '2023年09月',
    value: '20230930',
    TotalHc: 1716,
    CurrentHc: 5485,
    HcPercent: 319.64,
    start: 5485,
    end: 5373,
    BackgroundCurrentHc: 5485,
  },
  {
    Date: '2023年08月',
    value: '20230831',
    TotalHc: 1710,
    CurrentHc: 5486,
    HcPercent: 320.82,
    start: 5486,
    end: 5374,
    BackgroundCurrentHc: 5486,
  },
  {
    Date: '2023年07月',
    value: '20230731',
    TotalHc: 1729,
    CurrentHc: 5580,
    HcPercent: 322.73,
    start: 5580,
    end: 5468,
    BackgroundCurrentHc: 5580,
  },
];

chart
  .interval()
  .data({
    value: data,
    transform: [
      {
        type: 'fold',
        fields: ['BackgroundCurrentHc', 'CurrentHc'],
        key: 'type',
        value: 'value',
      },
    ],
  })
  .encode('x', 'Date')
  .encode('y', 'value')
  .encode('color', 'type')
  .transform({type:'dodgeX'});

chart.interaction('elementHighlightByColor', { background: true })

chart.render();

但是我们第一根柱子其实展示了3个数据

YY88Xu · 2023-12-20T03:38:43Z

代码是这个：

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

const chart = new Chart({ container: 'container' });

chart.data([{"Date":"2023年10月","value":"20231031","TotalHc":1716,"CurrentHc":5496,"HcPercent":320.28,"start":5496,"end":5384,"BackgroundCurrentHc":5496},{"Date":"2023年11月","value":"20231130","TotalHc":1739,"CurrentHc":5524,"HcPercent":317.65,"start":5524,"end":5412,"BackgroundCurrentHc":5524},{"Date":"2023年12月","value":"20231211","TotalHc":1746,"CurrentHc":5505,"HcPercent":315.29,"start":5505,"end":5393,"BackgroundCurrentHc":5505},{"Date":"2023年06月","value":"20230630","TotalHc":1724,"CurrentHc":5580,"HcPercent":323.67,"start":5580,"end":5468,"BackgroundCurrentHc":5580},{"Date":"2023年09月","value":"20230930","TotalHc":1716,"CurrentHc":5485,"HcPercent":319.64,"start":5485,"end":5373,"BackgroundCurrentHc":5485},{"Date":"2023年08月","value":"20230831","TotalHc":1710,"CurrentHc":5486,"HcPercent":320.82,"start":5486,"end":5374,"BackgroundCurrentHc":5486},{"Date":"2023年07月","value":"20230731","TotalHc":1729,"CurrentHc":5580,"HcPercent":322.73,"start":5580,"end":5468,"BackgroundCurrentHc":5580}])

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', 'BackgroundCurrentHc')
  .style('fill', 'gray')
  .encode('series', () => 'TotalHc')
  

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', 'TotalHc')
  .encode('series', () => 'TotalHc')

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', ['end', 'start'])
  .encode('series', () => 'TotalHc')

chart
  .interval()
  .encode('x', 'Date')
  .encode('y', 'CurrentHc')
  .style('fill', 'pink')
  .encode('series', () => 'CurrentHc')

chart.interaction('elementHighlightByColor', { background: true })

chart.render();

YY88Xu · 2023-12-20T03:39:11Z

pearmini · 2023-12-20T03:52:47Z

道理是一样的，你可以参考给你看的案例代码，用 fold transform

YY88Xu · 2023-12-20T04:01:56Z

第一根柱子是3个单独的数据，不是堆叠图哦

pearmini · 2023-12-21T03:35:31Z

那可能这个确实是一个问题，需要修复一下，我今天看看这个问题

pearmini added V5 Bug labels Dec 21, 2023

pearmini mentioned this issue Dec 21, 2023

fix(series): interval background #5965

Merged

pearmini closed this as completed in #5965 Dec 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tooltip 不显示 #5955

tooltip 不显示 #5955

YY88Xu commented Dec 20, 2023

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 21, 2023

tooltip 不显示 #5955

tooltip 不显示 #5955

Comments

YY88Xu commented Dec 20, 2023

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 20, 2023

YY88Xu commented Dec 20, 2023

pearmini commented Dec 21, 2023