G2
G2 copied to clipboard
[Bug]: 折线图在关闭所有legend项时,鼠标划入,会显示tooltip的所有内容,而柱状图却不会?
Describe the bug / 问题描述
折线图在点击legend中mark关闭所有子项后,鼠标划入中间区域,依旧会显示所有内容,而柱状图在关闭所有后划入则不会显示tooltip,希望其他图表能做到柱状图这种效果,在关闭所有legend子项后,关闭tooltip。
bug效果:
期望效果:
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 可以在这里统一描述一下你的期望效果~
@dajun1230 可以在这里统一描述一下你的期望效果~
- 柱状图、堆叠柱状图、箱型图等图形,希望在数据为null时,能正常触发显示tooltip,与折线图效果一致。
- 柱状图、堆叠柱状图在渲染数据为0时,希望能在x轴显示横线,数据为null时,x轴没有线条,和现在的效果一直,用户能够直观的看到x轴是否有线来快速区分数据为0还是为null。