前言
前端数据可视化是近几年比较热门的一个领域，而 highcharts 是其中比较流行和实用的一个工具库。最近 @finos 社区开发了一个 npm 包 @finos/perspective-viewer-highcharts，该包能够结合perspective.js 和 highcharts.js 帮助我们更方便的做一些有关可视化的工作。
本文将详细介绍 @finos/perspective-viewer-highcharts 的安装和使用过程，通过本文的学习读者可以了解到：
@finos/perspective-viewer-highcharts以及它在可视化数据方面的应用- 如何安装
@finos/perspective-viewer-highcharts - 如何使用
@finos/perspective-viewer-highcharts @finos/perspective-viewer-highcharts的深入阐述以及一些实用技巧
安装
@finos/perspective-viewer-highcharts 可以通过 npm 直接安装，输入以下命令：
npm install @finos/perspective-viewer-highcharts
使用
@finos/perspective-viewer-highcharts 是一个 npm 包用于构建可视化布局，它依赖于 perspective.js 和 highcharts.js 库。为了使用 @finos/perspective-viewer-highcharts，需要在 HTML 文件中引入以下文件：
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://unpkg.com/@finos/perspective-viewer-highcharts@0.1.6/dist/umd/perspective-viewer-highcharts.min.js"></script>
其中 plotly-latest.min.js 是 perspective.js 的依赖库，perspective-viewer-highcharts.min.js 是 @finos/perspective-viewer-highcharts 的主文件。
创建一个基本的 @finos/perspective-viewer-highcharts 可视化，需要有 HTML 元素作为容器，例如：
<div id="container"></div>
然后在 JavaScript 中，使用以下代码即可添加可视化的数据框架：
-- -------------------- ---- ------- ------ ----------- ---- -------------- ------ --------------------------------------- ----- ------ - --- ---------------------------------- ----- ------ - ------------------------------------- ----- ------ - --------------------- ----- ----- - ---------------- -- ---- ----- ---- - ------------- ------------------------ -- ------------------- -------------------
这里首先导入 perspective.js 库和 @finos/perspective-viewer-highcharts 库，然后可以定义一个 WebSocket 对象，用于连接到本地的视图服务器。还可以定义一个 viewer 容器，并且通过 perspective.worker() 创建一个 worker 实例，最后可以创建一个 table 实例，并通过 view 实例将数据输入到 viewer 中。
示例
@finos/perspective-viewer-highcharts 有很多实用的可视化实例，接下来我们来实现一个具体的例子。
假设我们有以下数据：
| State | Population | Electoral Votes |
|---|---|---|
| Alabama | 4874747 | 9 |
| Alaska | 739795 | 3 |
| Arizona | 7123898 | 11 |
| ... | ... | ... |
我们可以通过以下代码创建一个可视化：
-- -------------------- ---- -------
------ ----------- ---- --------------
------ ---------------------------------------
----- ---- - -
---------- -------------- -------- ---------- ------- ---
--------- -------------- ------- ---------- ------- ---
---------- -------------- -------- ---------- ------- ----
----------- -------------- -------- ---------- ------- ---
---
--
----- ------ - -------------------------------------
----- ------ - -
------ ---------
----------- ----------
---------- ------- ----------
--
----- ------ - ---------------------
----- ----- - ---------------------
----- -------- ---------- -
--- ---- - - -- - - ------------ - -- -- -
------------------------
-
-------------------
-
-----------在 HTML 中，我们使用一个 <div> 元素作为视图的容器，并使用 highcharts 的中的 column chart 可视化数据：
<div id="container"></div>
在 JavaScript 中，我们首先定义数据，然后定义一个 viewer 容器，接着定义字段 schema ，它包含了数据表的名字以及字段类型，在 perspective.worker() 实例中创建数据表格；最后，我们使用 async 和 for 循环将数据输入到表格中，然后使用 viewer.load(table) 将数据显示到 container 中。
@finos/perspective-viewer-highcharts的深入阐述及技巧
配置属性
@finos/perspective-viewer-highcharts 具有以下可用属性：
data- 一个包括所有数据的数组。columns- 在表格中显示的所有列。aggregates- 聚合操作：avg，count，distinct，dominant，first，last，low，high，mean，median，pct_sum_parent，pct_sum_grand_total，sum，stddevp，stdevpsamp，variance，variancep>parameters- 筛选数据的参数。view- 包含完整的可视化工具栏、图例、轴标签和标志的配置项。
导出数据
@finos/perspective-viewer-highcharts 支持多格式导出，包括 JSON，CSV 和 Excel 格式。这些可在 view 中通过以下代码实现：
console.log(await viewer.view.to_csv());
to_csv() 函数将数据转换为 CSV 格式。还有其他功能类似的函数，如 to_json() 函数将数据转换成 JSON 格式，to_columns() 函数将数据转换为列形式。
颜色和标记
@finos/perspective-viewer-highcharts 支持多种颜色和标志设置方法。可以使用 perspective.colors 属性设置颜色，例如：
perspective.colors = {
green: "#d1e0d7",
light_green: "#dff0de",
blue: "#deebf7",
light_blue: "#eef3f9",
red: "#ebd2d2",
light_red: "#fff1f1"
};此外，还可以通过以下方式设置图表中数据点的标记：
-- -------------------- ---- -------
--- ---- - ------------
----------- ---------
-------- ----------
------ -
------- -
----- ----------
----- -
-
-
---这里 type 属性设置要使用的标记类型，而 size 属性设置每个标记的大小。
结语
@finos/perspective-viewer-highcharts 整合了 perspective.js 和 highcharts.js，可以轻松地进行数据可视化。本文中介绍了 @finos/perspective-viewer-highcharts 在安装和使用过程中的基本知识，还展示了一个示例，介绍了一些高级配置和技巧。在掌握这些内容后，您就可以创建更复杂和个性化的数据可视化了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87784