关于在图标上滑动十字显示问题
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
- [ ] I have searched the [issues](https://github.com/antvis/f2/issues) of this repository and believe that this is not a duplicate.
### Reproduction link
[](https://codesandbox.io/s/new-fog-xjkko?file=/src/index.js&resolutionWidth=320&resolutionHeight=675)
### Steps to reproduce
1. 加上这行代码 `chart.area().position('date*value').color('type');`, 在走势图上横向滑动的时候十字 tooltip不显示十字;
2. 如何修改样式,tooltip与走势线的空心交点
| Environment | Info |
|---|---|
| f2 | 3.8.1 |
| System | - |
| Browser | - |
---
如果代码打不开,可以看一下下面的,root更一下就可以了
```js
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();
});
```
Contributor guide
Research direction
Start with the CodeSandbox reproduction in src/index.js and the chart.tooltip, chart.line(), and chart.area() configuration shown in the issue. Reproduce the missing crosshair when swiping horizontally with F2 3.8.1, then verify the tooltip and hollow intersection styling behave as requested.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100