antvis / antvis/F2

关于在图标上滑动十字显示问题

Open
#1,126 0 comments 0 reactions 0 assignees View on GitHub
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
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.