G2 icon indicating copy to clipboard operation
G2 copied to clipboard

[Bug]: 折线图在关闭所有legend项时,鼠标划入,会显示tooltip的所有内容,而柱状图却不会?

Open dajun1230 opened this issue 7 months ago • 2 comments

Describe the bug / 问题描述

折线图在点击legend中mark关闭所有子项后,鼠标划入中间区域,依旧会显示所有内容,而柱状图在关闭所有后划入则不会显示tooltip,希望其他图表能做到柱状图这种效果,在关闭所有legend子项后,关闭tooltip。 bug效果: Image 期望效果: Image

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

折线图示例代码:(https://g2.antv.antgroup.com/examples/general/line/#curved)

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

const data = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];

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

chart
  .data(data)
  .encode('x', 'month')
  .encode('y', 'temperature')
  .encode('color', 'city')
  .scale('x', {
    range: [0, 1],
  })
  .scale('y', {
    nice: true,
  })
  .axis('y', { labelFormatter: (d) => d + '°C' });

chart.line().encode('shape', 'smooth');

chart.point().encode('shape', 'point').tooltip(false);

chart.render();

柱状图示例代码:(https://g2.antv.antgroup.com/examples/general/interval/#interval-style)

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

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

chart.options({
  type: 'interval',
  data: [
    { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
    { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
    { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
    { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
    { name: 'London', 月份: 'May', 月均降雨量: 47 },
    { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
    { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
    { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
    { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
    { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
    { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
    { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
    { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
    { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
    { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
    { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
  ],
  encode: { x: '月份', y: '月均降雨量', color: 'name' },
  transform: [{ type: 'stackY' }],
  style: {
    minHeight: 20,
    columnWidthRatio: 0.5,
    radiusTopLeft: 20,
    radiusTopRight: 20,
    insetBottom: 5,
    // 绘图属性
    fill: (d) => (d.name === 'London' ? '#688FD4' : '#55BECC'), // 绘图属性也可以是一个回调函数
    fillOpacity: 0.9,
    stroke: '#fff',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.5,
    opacity: 1,
    shadowColor: '#BABBBD',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer',
  },
});

chart.render();

Version / 版本

Please select / 请选择

OS / 操作系统

  • [x] macOS
  • [ ] Windows
  • [ ] Linux
  • [ ] Others / 其他

Browser / 浏览器

  • [x] Chrome
  • [ ] Edge
  • [ ] Firefox
  • [ ] Safari (Limited support / 有限支持)
  • [ ] IE (Nonsupport / 不支持)
  • [ ] Others / 其他

dajun1230 avatar Jun 16 '25 09:06 dajun1230

@dajun1230 可以在这里统一描述一下你的期望效果~

interstellarmt avatar Jun 18 '25 09:06 interstellarmt

@dajun1230 可以在这里统一描述一下你的期望效果~

  1. 柱状图、堆叠柱状图、箱型图等图形,希望在数据为null时,能正常触发显示tooltip,与折线图效果一致。
  2. 柱状图、堆叠柱状图在渲染数据为0时,希望能在x轴显示横线,数据为null时,x轴没有线条,和现在的效果一直,用户能够直观的看到x轴是否有线来快速区分数据为0还是为null。

dajun1230 avatar Jun 18 '25 09:06 dajun1230