antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

在V5.2.8版本中,实现折线图的实时更新,效果比在V3.5.1中要差 #6590

Guayueban posted onGitHub

问题描述

V3示例:https://antv-2018.alipay.com/zh-cn/g2/3.x/demo/other/line-realtime.html# 对其进行修改后在V5中进行实现,效果不理想。 希望能针对实时数据的渲染做部分优化

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


感谢您提供的问题描述。您提到在 G2 V5.2.8 版本中实现折线图的实时更新效果不如 V3.5.1 版本。为了帮助您解决这个问题,我建议以下几个步骤:

  1. 性能优化:检查数据更新的频率和数据量。实时更新时,尽量减少每次更新的数据量,或者降低更新频率,以减少渲染压力。

  2. 使用动画:在 V5 中,您可以尝试使用动画来平滑数据更新的过程。确保动画配置合理,以避免过多的计算开销。

  3. 检查配置:确保在 V5 中的配置与 V3 中尽可能一致。某些配置项在新版本中可能有变化,您可以查看官方文档以获取更多信息。

  4. 浏览器性能:不同的浏览器可能对图形渲染有不同的优化,尝试在不同的浏览器中测试效果。

如果您有具体的代码示例或配置,可以分享出来,我可以帮助您进一步分析和优化。

如果您希望这个问题被记录为一个 GitHub issue,请告诉我,我可以为您创建一个问题记录。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 3 months ago

谢谢你的回复,我会尝试使用动画来衔接渲染效果。下面是我进行V5改写的V3相关demo与配置 `let chart: any; let data: any = [];

onMounted(() => { chart = new Chart({ container: 'chartDom', });

chart.line().data(data).encode('x', 'time').encode('y', 'temperature').encode('color', 'type');

chart.render();
setInterval(function () {
  let now = new Date();
  let time = now.getTime();
  let temperature1 = ~~(Math.random() * 5) + 22;
  let temperature2 = ~~(Math.random() * 7) + 17;
  if (data.length >= 1000) {
    data.shift();
    data.shift();
  }
  data.push({
    time: time,
    temperature: temperature1,
    type: '记录1',
  });
  data.push({
    time: time,
    temperature: temperature2,
    type: '记录2',
  });
  chart.changeData(data);
}, 10);

});`

posted by Guayueban 3 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests