跳到主要内容

常见问题及解决方案

如果使用中遇到问题，请加入 Vanish 的“行情图反馈”公开群进行反馈。

数据问题​

如何设置自动更新数据及其频率？​

  • 场景

    对于分时数据来说有很强的时效性，所以需要数据能在一定时间间隔后自动更新。

  • 解决方案

    在注册数据源时，配置 isKeepingGet: true 和 intervalTime（默认为 60000ms），示例代码：

    const dataProvider = D3Charts.getDataPool().register({
      type: 'fsToday',
      code: code,
      isKeepingGet: true,
      // 间隔多久更新一次(推荐大于60秒,因为现在服务端缓存是1分钟)
      intervalTime: 2000,
    });

停止自动更新数据？​

  • 场景

    在通过 D3Charts.getDataPool().register() 注册数据源时，如果配置了 isKeepingGet: true，会以 intervalTime 配置的时间（默认为 60000ms）为间隔不断地重新发起请求获取数据。

  • 解决方案

    可通过调用 stopGetData() API 停止自动请求数据，示例代码：

    const dataProvider = D3Charts.getDataPool().register({ isKeepingGet: true });
    dataProvider.stopGetData();
    注意

    目前只能停止，不能重新开启；有必要的话，可以销毁重新创建数据池和图表。

请求数据超时无法重新请求？​

  • 场景

    在线上页面偶尔会出现数据池请求时间过长（21s）的情况，图表无数据渲染（onAction 回调中 code !== 0 ）。

  • 原因

    根据源码分析，内部请求数据时设置了 9000ms 的超时参数，且没有暴露出来配置项，而且一旦请求失败也不会自动重试。

  • 解决方案

    根据源码分析，onAction 回调中 code 可能为 000(正常)、001(正在等待响应)、002(发生错误)，由于没有提供重新发起请求的 API，所以一旦发生 code === 002 的场景，建议业务方销毁数据池，重新注册，重新监听 onAction。

为什么请求历史 K 线数据时，不同服务器返回的 .all 接口最后一个日期数据不一致？​

  • 场景

    在发起多次历史数据请求时，最后一天（当日）数据可能不一致。

  • 原因

    因为历史数据的缓存频率极低(12 个小时，估计是历史 K 线的访问请求很大，所以做了这个策略，因此历史请求中的当日数据即使返回了也是不能用的)。

  • 解决方案

    鉴于以上原因，允许最后一天的数据不实时，靠前端用 .today.js 接口的数据进行补全。所以请求历史 K 线时，可以看到总共会发出 2 个请求：

    http://d.10jqka.com.cn/v6/line/hs_300033/01/all.js

    http://d.10jqka.com.cn/v6/line/hs_300033/01/defer/today.js

交互问题​

K 线图在某些数据段，AxisPointer 的显示位置与鼠标指针位置出现偏差？​

  • 场景

    业务方提供 html 示例，加载了 10 年的数据，在后半年的数据段鼠标交互时 AxisPointer 的显示位置出现偏差（业务方同时提供了一个关键信息，替换掉该段数据则问题不会复现）。

  • 原因

    数据源问题（经过打断点调式后发现，在数据索引获取正确的情况下内部 x 轴比例尺计算的刻度位置错误，发现是数据源的 t 字段存在重复的数据项，导致比例尺计算位置出现偏差）。

  • 解决方案

    检查源数据，对数据进行去重。

性能问题​

多次重复渲染图表出现内存泄露问题？​

  • 场景

    在多次调用 init() 重复渲染图表的过程中，页面的内存增长速度很快（很容易就达到 200MB+），且持续降不下来。

  • 原因

    D3Charts 没有提供类似 destroy() 的 API，clear() API 只是清空画布内容，导致多次调用 init() 时原有的内存无法释放掉（主要是数据池的缓存）。

  • 解决方案

    分析源码后，提供一个 destroy() 函数给业务方使用：

    function destroy() {
      if (chart) {
        // 清除图表
        delete D3Charts.instances[chart.id];
        chart.clear();
        chart.getZr().off();
        chart.getZr().dispose();
        document.getElementById('chart').innerHTML = '';

        // 移除 D3Charts.getDataPool().register() 的实例（释放缓存的数据）
        // 注意：removeProvider() 的参数要和 register() 中的保持一致
        // 举例：
        // 如果注册时为 D3Charts.getDataPool().onAction(params, 'PROVIDER_UPDATE.chart', () =>{});
        // 那此时应该为 D3Charts.getDataPool().removeProvider('.chart');
        D3Charts.getDataPool().removeProvider('.myproject');
        D3Charts.getDataPool().eventTopics = {};
      }

      chart = null;
    }