在前端开发中，数据可视化是非常重要的一环。而高度定制化效果的图表库 Highcharts 也是前端开发者们非常喜欢使用的工具之一。近期，JPMorgan Chase & Co. 开源了 npm 包 @jpmorganchase/perspective-viewer-highcharts，该包能够将 Highcharts 和 Perspective.js 的功能结合在一起，提供了高性能的交互式高定制化的数据可视化方案。本篇文章主要介绍该包的使用教程，包含以下内容：
- 安装和基本使用
- 使用交互控件
- 高级用法
安装和基本使用
使用该包之前，需要确保已经正确安装并配置了 Perspective.js 和 Highcharts。可以利用 npm 在项目中安装该包：
npm install @jpmorganchase/perspective-viewer-highcharts
接下来，可以在代码中导入并使用该包。为了便于演示，我们使用官方文档中提供的数据集：
-- -------------------- ---- -------
------ ----------------------------- ---- ---------------------------------------------------------------------------------------------
----- ------ - --- ------------------------------
-------------
--- -- -- -- -- ---
--- -- -- -- -- ---
--- -- -- -- -- ---
---
----------------------------------上述代码会将一个包含了 x、y 和 z 三个字段的数据集加载到 PerspectiveViewerHighcharts 中，并将其显示在页面上。基本使用可以满足通常的需求，接下来我们将介绍如何使用该包的更多功能。
使用交互控件
PerspectiveViewerHighcharts 提供了许多交互控件，使得用户可以方便的进行交互操作。以下是一些常用的控件：
X、Y 轴选择器
X、Y 轴选择器可以让用户自定义展示的数据。例如，下述代码会将 y 字段设置为主要的 Y 坐标轴：
viewer.configure({
"y": ["y"]
});翻页控件
当数据集较大时，翻页控件可以让用户方便的浏览不同页数的数据。以下是如何添加翻页控件的示例代码：
viewer.setAttribute("pagination", true);行选择器
行选择器可以让用户选择一个或多个行，便于强调和分析数据。以下是如何添加行选择器的示例代码：
viewer.setAttribute("columns", ["z"]);
viewer.setAttribute("row-pivots", ["y"]);
viewer.setAttribute("filters", [["z", ">", 4]]);
viewer.setAttribute("selectable", true);
viewer.addEventListener("perspective-select", (event) => {
console.log(event.detail);
});上述代码会将 z 字段添加到列中，将 y 字段添加到行中，并过滤掉 z 小于等于 4 的行。同时，该代码还会将 selectabe 属性设置为 true，表示允许选择行。最后，当用户选择一行时，perspective-select 事件会派发出去，开发者可以在回调事件中获取选择的行。
高级用法
在基本使用和使用交互控件的基础上，PerspectiveViewerHighcharts 还提供了许多高级用法，例如使用 WebWorker 优化性能、自定义渲染图表和绘制多个图表等。
以下是使用 WebWorker 的示例代码：
-- -------------------- ---- -------
------ ----------------------------- ---- ---------------------------------------------------------------------------------------------
----- ------ - --- ------------------------------
-------------
--- -- -- -- -- ---
--- -- -- -- -- ---
--- -- -- -- -- ---
---
----------------------------------PerspectiveViewerHighcharts 可以在主线程中运行，但当数据集十分庞大时，可能会卡顿。使用 PerspectiveWorkerHighcharts 可以将数据处理逻辑放在 Web Worker 中，提高渲染性能。
使用自定义渲染图表需要定义一个自己的 Highcharts 图表配置对象。例如，以下代码会将 x 和 y 字段绘制成一个条形图，而不是默认的线图：
-- -------------------- ---- -------
-------------------
-------- -
------- --------
--
-------- -
------------- -----
--
-------- -
-------- ---
--
--------- --
------- -----
--
---最后，在某些场景下，需要绘制多个图表。以下是如何在同一页中绘制两个图表的示例代码：
-- -------------------- ---- -------
------ ----------------------------- ---- ---------------------------------------------------------------------------------------------
------ ---------- ---- -------------
----- ------- - --- ------------------------------
--------------
--- -- -- -- -- ---
--- -- -- -- -- ---
---
----- ------ - -------------------------- -
-------- -
------- ------
--
-------- -
------------- -----
--
-------- -
-------- ---
--
--------- --
------- -----
--
---
----- ------ - -------------------------- -
-------- -
------- --------
--
-------- -
------------- -----
--
-------- -
-------- ---
--
--------- --
------- -----
--
---
---------------------- ---------
-----------------------------------由于 PerspectiveViewerHighcharts 使用了 Highcharts，因此上述代码中也要导入 Highcharts 并使用其 API 绘制图表。
综上，@jpmorganchase/perspective-viewer-highcharts 是一个非常强大的数据可视化工具，提供了高性能的数据处理和交互功能。不论是普通的数据展示，还是复杂的数据分析，都可以通过该包高效完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87786