The issue has been closed

tooltip 不显示 #5955

YY88Xu posted onGitHub

问题描述

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();

<img width="1505" alt="image" src="https://github.com/antvis/G2/assets/14836228/31482439-a01c-4ce2-84a3-aa0af9586058"> hover 第一条灰色的柱子不出现 tooltip, hover 粉色柱子才出现 tooltip, 为啥

重现链接

No response

重现步骤

预期行为

No response

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

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

posted by pearmini over 1 year ago

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

posted by YY88Xu over 1 year ago

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

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

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

posted by YY88Xu over 1 year ago

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

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();

posted by pearmini over 1 year ago

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

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();

<img width="998" alt="image" src="https://github.com/antvis/G2/assets/14836228/c75e8e0b-aa9f-4e33-a6c7-d4065c5d6c72"> 但是我们第一根柱子其实展示了3个数据

posted by YY88Xu over 1 year ago

代码是这个：

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();

posted by YY88Xu over 1 year ago

posted by YY88Xu over 1 year ago

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

posted by pearmini over 1 year ago

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

posted by YY88Xu over 1 year ago

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

posted by pearmini over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

tooltip 不显示 #5955

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect