#2166·F2

使用 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

javascript
/** @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 是为了不显示范围以外的内容,但并不意味着波形的形状改变,这样是不对的