KLineChart icon indicating copy to clipboard operation
KLineChart copied to clipboard

[Bug] DataLoader.getBars 立即返回数据会触发bug,自动滚动到最晚时间,然后又触发加载多次循环

Open davincerepo opened this issue 4 months ago • 2 comments

版本

10.0.0-alpha8

复现步骤

操作表现:往左拖动k线,触发 DataLoader.getBars 加载的如果还没松开鼠标,会自动跳转到最后的k线,再次触发加载

必现代码 codesandbox

import { init, KLineData } from "klinecharts";

const chart = init("custom-figure-custom-overlay-chart");

chart.setSymbol({ ticker: "TestSymbol" });
chart.setPeriod({ span: 1, type: "day" });
chart.setDataLoader({
  getBars: async ({ callback }) => {
    const bars: KLineData[] = [];
    let lastClose = 1000; // 初始的收盘价
    let timestamp = Date.now(); // 初始的时间戳

    // 生成500条数据
    for (let i = 0; i < 500; i++) {
      const open = lastClose + Math.random() * 5 - 2.5; // 开盘价相对收盘价波动
      const close = open + Math.random() * 5 - 2.5; // 收盘价相对开盘价波动
      const high = Math.max(open, close) + Math.random() * 3; // 最高价
      const low = Math.min(open, close) - Math.random() * 3; // 最低价

      bars.push({
        timestamp,
        open,
        high,
        low,
        close,
      });

      lastClose = close; // 更新收盘价
      timestamp += 86400000; // 时间戳递增一天(毫秒)
    }

    // 返回数据,DataLoadMore设置为true true,表示还有数据可以加载
    callback(bars, { forward: true, backward: true });
  },
  subscribe: (params) => {},
  unsubscribe: (params) => {},
});

当前效果

操作表现:往左拖动k线,触发 DataLoader.getBars 加载的如果还没松开鼠标,会自动跳转到最后的k线,再次触发加载

预期效果

不会自动滚动

环境

- 系统: windows 10
- 浏览器: 139.0.7258.128(正式版本) (64 位)
- 框架: 不用框架可以复现

补充说明

No response

davincerepo avatar Aug 30 '25 10:08 davincerepo

codesandbox链接打不开,没有复现你说的问题,检查下看是不是自动向后加载了,你的代码会自动往后加载数据。

liihuu avatar Sep 01 '25 17:09 liihuu

codesandbox链接打不开,没有复现你说的问题,检查下看是不是自动向后加载了,你的代码会自动往后加载数据。

codesandbox链接 现在可以打开了,之前忘了权限。

这个代码是在调用 getBars 的时候自动加载,getBars 是库发起调用的,正常是通过网络请求拿数据,这代码是随机生成数据立即返回。

这段代码本意是按需往后加载数据,如果我没理解错的话,backward: true 表示后面还有数据,但不一定立即触发加载,正常是等到再次拖动到边界才会触发加载,问题是一次 callback 之后自动跳到边界,然后立即触发下一次 getBars 了,然后再次callback,再次触发 getBars ,短时间内多次循环,直到你松开鼠标为止。

我在PC端和手机端chrome上都复现了,这个是手机上录的视频。

https://github.com/user-attachments/assets/bf43ffd2-fe17-403d-9046-737146a174f2

davincerepo avatar Sep 02 '25 07:09 davincerepo