介绍
近年来，数据可视化成为前端热门领域之一。@jpmorganchase/perspective-viewer 是一个强大的 npm 包，它提供了一个方便、易用的数据可视化工具，可以帮助前端开发者更好地进行数据可视化。本文将介绍如何使用 @jpmorganchase/perspective-viewer。
基本使用
安装
使用 npm 安装：
npm i @jpmorganchase/perspective-viewer
引入
import '@jpmorganchase/perspective-viewer';
import '@jpmorganchase/perspective-viewer/dist/umd/material';
import { PerspectiveViewer } from '@jpmorganchase/perspective-viewer';HTML 使用
<perspective-viewer></perspective-viewer>
JS 使用
const viewer = document.querySelector('perspective-viewer');
viewer.load(require('theta.json'));以上代码会通过网络请求，把我们要展示的数据装到内存里，接下来通过 viewer 对象的相应方法对数据进行展示。
示例代码分析
上述代码中的 theta.json 文件中的示例数据格式如下：
-- -------------------- ---- ------- - -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ----- -------- -------------- -------- ---- -
上述代码展示了一组日期数据和数值数据，接下来我们要对这组数据进行可视化展示。
-- -------------------- ---- ------- ----- ------ - --------------------------------------------- -- ---- ----------------------------------- -- ---------------- --------------------------- ------------------------- -- -------------------------- --------------------------------- ------------ ------------------------------ ------------- --------------------------------- ---------- --------- -- ------- ---------------
结果展示
通过上述代码处理后，我们可以得到一个基于数据的柱状图，图像内显示了我们上述数据的变化过程，同时，通过鼠标交互可以查看详细的数值信息。
高级使用
@jpmorganchase/perspective-viewer 提供了丰富的设置选项，可以根据具体的需求进行定制。在此我们将讨论几个主要的设置项。
视图模式
通过修改 viewer 对象的 view 属性，我们可以调整当前视图的展示方式。在不同的视图之间切换，可以更好地展示数据。例如，在之前的例子中，我们使用了 y_line.viz.line-chart 模式来展示数据的变化情况。
viewer.setAttribute('view', 'y_line.viz.line-chart');在 @jpmorganchase/perspective-viewer 包中，提供了许多其它视图模式供我们选择。下面是一些常用的视图模式：
- xy_scatter 进行点图展示
- y_scatter 进行线图展示
- y_line 进行折线图展示
- heatmap 进行热力地图展示
- treemap 进行树形地图展示
行分组
@jpmorganchase/perspective-viewer 可以根据选择的字段进行行分组，以实现更好的数据展示效果。在之前的例子中，我们使用了 date 作为分组字段。
viewer.setAttribute('row-pivots', '["date"]');除了单个字段进行分组之外，我们也可以使用数组来选择多列进行分组。
聚合
聚合是 @jpmorganchase/perspective-viewer 中一个强大的功能，它可以同时对多列数据进行聚合处理。可以通过聚合来统计每个分类的重要度，以帮助我们更好地理解数据。
在之前的例子中，我们对数值列使用了 sum 聚合函数进行聚合。除了 sum，@jpmorganchase/perspective-viewer 中还提供了常用的聚合函数，例如：
- count 统计数据的总数量
- distinct-count 统计不同数据的数量
- average 计算数据的平均值
- min 计算数据的最小值
- max 计算数据的最大值
排序
数据的排序可以通过如下方式进行设置：
viewer.setAttribute('sort', '["date"]');以上代码中，我们将数据排序方式设置为按照日期进行排序。
筛选
筛选可以帮助我们更好地展示数据。在 @jpmorganchase/perspective-viewer 中，你可以使用以下代码进行设置：
viewer.setAttribute('filters', `[["date", ">", ${date}]]`);上述代码中，我们筛选过滤器的条件为比指定日期要大的数据。
结束语
通过本文，您将学习到如何使用 @jpmorganchase/perspective-viewer 这个强大的 npm 包进行数据可视化。通过本文中的示例代码和设置选项，您将能够更好地掌握 @jpmorganchase/perspective-viewer 的使用方式，并为您在前端数据可视化领域的工作打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/96669