使用 nice:false, viewClip:false, 折线的点因为value超出Y轴max,min而被忽略,从而导致波峰或波谷消失
Author: AirkroCreated May 20, 2026Updated May 20, 2026
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
https://sive.antv.antgroup.com/share/lAxGEmgzPQKA95o3DYpe
Steps to reproduce
/** @jsx jsx */
import { jsx, Canvas, Chart, Line, Axis, Tooltip } from '@antv/f2';
// 数据包含超出 Y 轴范围 20-100 的点:
// - 泵1月 (value: 5) 和 10月 (value: 8) 低于 min:20
// - 6月 (value: 150)、7月 (value: 180) 高于 max:100
// - 2月份有一个波谷值 15 也低于 min:20
const data = [
{ month: '1月', value: 5 }, // 低于 min:20 (需要显示问题:这个点被忽略)
{ month: '2月', value: 25 },
{ month: '3月', value: 35 },
{ month: '4月', value: 45 },
{ month: '5月', value: 30 },
{ month: '6月', value: 150 }, // 高于 max:100 (需要显示问题:这个点被忽略,导致波峰消失)
{ month: '7月', value: 180 }, // 高于 max:100 (需要显示问题:这个点被忽略)
{ month: '8月', value: 60 },
{ month: '9月', value: 80 },
{ month: '10月', value: 8 }, // 低于 min:20 (需要显示问题:这个点被忽略)
{ month: '11月', value: 70 },
{ month: '12月', value: 90 },
];
const context = document.getElementById('container').getContext('2d');
const { props } = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart
data={data}
scale={{
month: {
range: [0, 1],
},
value: {
min: 20,
max: 100,
nice: false, // 禁用 nice 调整
},
}}
>
<Axis field="month" />
<Axis field="value" />
<Line
x="month"
y="value"
viewClip={false} // 关闭视图裁剪
/>
<Tooltip />
</Chart>
</Canvas>
);
const canvas = new Canvas(props);
canvas.render();| Environment | Info |
|---|---|
| f2 | 5.14.0 |
| System | - |
| Browser | - |
不使用 nice:true 是为了不显示范围以外的内容,但并不意味着波形的形状改变,这样是不对的
Source: antvis/F2