在 5.x 版本中，在多条折线图 + 点标注 + 滚动条的情况下，点标注只显示最右侧

/ ** @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 } = ( <Canvas context={context} pixelRatio={window.devicePixelRatio}> <Chart data={data}> <Axis field="date" tickCount={3} style={{ label: { align: 'between' } }} /> <Axis field="value" tickCount={5} /> <Line x="date" y="value" lineWidth="4px" color="type" /> <Legend position="top" style={{ justifyContent: 'space-around' }} triggerMap={{ press: (items, records, legend) => { 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); } }} /> <Point x="date" y="value" color={['type', ['#FFC22D', '#00CF7B']]} shape="hollowCircle" style={{ fill: '#ffffff', lineWidth: 2, strokeOpacity: 1 }} /> <ScrollBar mode="x" range={[0, 0.2]} /> </Chart> </Canvas> ); const chart = new Canvas(props); chart.render(); });