antvis/G2
The issue has been closed
关于在图标上滑动十字显示问题 #3241
ruoru posted onGitHub
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
- 在走势图上横向滑动的时候十字 tooltip不显示十字
- 如何隐藏tooltip与走势线的空心交点
- 如何修改样式,tooltip与走势线的空心交点
Environment | Info |
---|---|
g2 | 4.1.7 |
System | - |
Browser | - |
<!-- generated by antv-issue-helper. DO NOT REMOVE -->
如果代码打不开,可以看一下下面的,root更一下就可以了
import F2 from '@antv/f2';
import _ from 'lodash';
fetch('https://gw.alipayobjects.com/os/antfincdn/OVMtvjbnut/series-line.json')
.then(res => res.json())
.then(data => {
const chart = new F2.Chart({
id: 'root',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.scale('date', {
type: 'timeCat',
tickCount: 3
});
chart.scale('value', {
tickCount: 5
});
chart.axis('date', {
label: function label(text, index, total) {
// 只显示每一年的第一天
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
showXTip: true,
showYTip: true,
snap: true,
crosshairsType: 'xy',
crosshairsStyle: {
lineDash: [2]
},
onChange: function onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function(item) {
map[item.name] = _.clone(item);
});
tooltipItems.forEach(function(item) {
const name = item.name;
const value = item.value;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(_.values(map));
},
onHide: function onHide() {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}
});
chart.line().position('date*value').color('type');
chart.area().position('date*value').color('type');
chart.render();
});