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