5.x 版本 多折线图 + Point 标注下 + 滚动条的情况下, Point 标注只显示出最右侧
- 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
代码片段在最后。
左侧为初始渲染,右侧是滚动几下后,会随机显示出所有点。有时候这些点闪烁一下就消失了。
以下代码,粘贴到文档示例中即可复现。
文档示例: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
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