TOAST UI Chart 实时更新(Live Update)功能详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00943/article/details/148505524

TOAST UI Chart 实时更新(Live Update)功能详解

tui.chart 项目地址: https://gitcode.com/gh_mirrors/tui/tui.chart

什么是实时更新功能

TOAST UI Chart 提供了一项强大的实时数据更新功能 - Live Update。这个功能允许图表在添加新数据时，以平滑的动画效果展示数据变化，同时保持图表显示区域的数据量恒定。

通过对比两种数据更新方式，我们可以直观理解Live Update的价值：

普通更新模式（未启用shift选项）
- 每次添加新数据时，图表会整体向左移动
- 随着数据量增加，图表会变得越来越拥挤
- 最终可能导致X轴标签重叠，难以辨认
Live Update模式（启用shift选项）
- 图表显示区域保持固定数量的数据点
- 新数据添加时，旧数据会优雅地"滑出"视图
- 始终保持最佳的视觉可读性

如何启用实时更新功能

启用Live Update功能只需要简单的两步配置：

第一步：设置series.shift选项

在图表配置项中，将series.shift设置为true：

const options = {
  series: {
    shift: true  // 启用实时更新功能
  }
};

第二步：使用addData API添加数据

创建图表实例后，通过addData方法动态添加数据：

// 创建图表实例
const chart = new LineChart({ 
  el: document.getElementById('chart'), 
  data, 
  options 
});

// 添加新数据
chart.addData(newData, newCategory);