antvis / antvis/F2

5.x 版本 多折线图 + Point 标注下 + 滚动条的情况下, Point 标注只显示出最右侧

Open
#2,165 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8k
Forks
637
PR merge metrics
No merged PRs in 30d

Description

多折线的情况下,使用Point,并且带有滚动的情况下,Point 显示异常。

文档示例:https://f2.antv.antgroup.com/examples/line/multiple/#series

代码片段在最后。

左侧为初始渲染,右侧是滚动几下后,会随机显示出所有点。有时候这些点闪烁一下就消失了。


Image

Image

以下代码,粘贴到文档示例中即可复现。
文档示例:https://f2.antv.antgroup.com/examples/line/multiple/#series

```

/** @jsx jsx */
import { jsx, Canvas, Chart, Line, Axis, Legend, ScrollBar, Point } from '@antv/f2';
import _ from 'lodash';

fetch('https://gw.alipayobjects.com/os/antfincdn/OVMtvjbnut/series-line.json')
.then((res) => res.json())
.then((data) => {
const context = document.getElementById('container').getContext('2d');
const { props } = (





{
const map = {};
items.forEach((item) => (map[item.name] = _.clone(item)));
records.forEach((record) => {
map[record.type].value = record.value;
});
legend.setItems(_.values(map));
},
pressend: (items, records, legend) => {
legend.setItems(items);
},
}}
/>



);

const chart = new Canvas(props);
chart.render();
});

```

Contributor guide

Open the contributing guide

Research direction

Start with the multiple-line chart example at https://f2.antv.antgroup.com/examples/line/multiple/#series and reproduce the behavior using the provided Canvas, Line, Point, and ScrollBar configuration. Scroll horizontally and compare the Point annotations before and after scrolling; done means all expected points remain visible and do not flicker or disappear.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.