在当前的前端项目中，有许多场景需要用到数据的可视化展示，并且需要通过网页实时更新，实现数据的实时展示。@activfinancial/tpi-viewer 是一款可以帮助前端项目实现数据展示的 npm 包，本文将为大家详细介绍该包的使用教程。
包安装
要使用 @activfinancial/tpi-viewer，首先需要在项目中进行安装。
打开终端，在项目根目录下运行以下指令：
npm install @activfinancial/tpi-viewer
安装完毕后，可以通过以下方式导入该包：
import { TpiViewer } from '@activfinancial/tpi-viewer';TpiViewer 类的使用
TpiViewer 类是 @activfinancial/tpi-viewer 中用来实现数据可视化的类。
初始化 TpiViewer
TpiViewer 的初始化非常简单，只需要创建 TpiViewer 实例，并将数据源传入即可。
const data = [
{ x: 1, y: 5 },
{ x: 2, y: 10 },
{ x: 3, y: 15 },
{ x: 4, y: 20 },
];
const tpiViewer = new TpiViewer(data);可视化的类型
TpiViewer 目前支持以下类型的数据可视化：
- 折线图：line
- 散点图：scatter
- 条形图：bar
可视化类型可以在初始化 TpiViewer 时通过 options 参数指定。
const options = {
type: 'line',
};
const tpiViewer = new TpiViewer(data, options);实时更新数据
TpiViewer 可以实时更新数据源中的数据，从而实现数据的实时展示。
const newData = [
{ x: 1, y: 6 },
{ x: 2, y: 8 },
{ x: 3, y: 14 },
{ x: 4, y: 22 },
];
tpiViewer.updateData(newData);TpiViewer 中的事件
TpiViewer 中提供了以下事件：
- dataChange：当数据源发生变化时触发。
- mouseOver：当鼠标移动到可视化区域上方时触发。
- mouseOut：当鼠标移出可视化区域时触发。
-- -------------------- ---- ------- -------------------------- --------- -- - ------------------------ -- --------- --- ------------------------- ------- -- - ----------------------- -- ------- --- ------------------------ ------- -- - ---------------------- -- ------- ---
示例代码
下面是一个完整例子，用来展示如何使用 @activfinancial/tpi-viewer 展示数据。
-- -------------------- ---- ------- ------ - --------- - ---- ----------------------------- ----- ---- - - - -- -- -- - -- - -- -- -- -- -- - -- -- -- -- -- - -- -- -- -- -- -- ----- ------- - - ----- ------- -- ----- --------- - --- --------------- --------- -------------------------- --------- -- - ------------------------ -- --------- --- ------------------------- ------- -- - ----------------------- -- ------- --- ------------------------ ------- -- - ---------------------- -- ------- --- ----- ------- - - - -- -- -- - -- - -- -- -- - -- - -- -- -- -- -- - -- -- -- -- -- -- ------------------------------
结语
本文介绍了 @activfinancial/tpi-viewer 的使用教程，通过本文的阅读，读者可以轻松地在前端项目中完成数据可视化的展示，并实现数据源的实时更新。在实际开发中，读者可按照教程进行实践，掌握该包的使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108615