Juttle-viewer 是一个 npm 包，它提供了一个可视化的交互式 juttle 浏览器。它非常适合于前端开发人员和数据分析师，可以用于快速创建、调试和调整 juttle 编程语言脚本。本文将详细介绍 juttle-viewer 的使用方法，包括安装、初始化和使用。
安装 juttle-viewer
首先要安装 juttle-viewer，可以使用如下命令：
--- ------- -- -------------
这将在全局范围安装 juttle-viewer。如果您想将它安装在特定项目中，可以省略 -g 选项，并在项目根目录中运行该命令。
初始化 juttle-viewer 项目
安装完成后，您可以使用以下命令在特定目录中初始化 juttle-viewer 项目：
------------- ---- --------------
其中， 为您的项目名称。
执行上述命令后，会自动创建一个新的目录，并在其中生成默认的 juttle-viewer 项目结构。项目结构如下：
-------------
--- ------------------
--- ---------------
- --- ------------
--- -----------------
--- ------------
--- -------
--- ----
- --- ---------
--- ---
- --- --------
- --- ---------
--- ----
- --- -------------------
- --- ---------
- --- -------------
--- ----------
--- -----
--- --------
--- ----------
--- --------------------其中，
juttle-config.json是 juttle-viewer 的全局配置文件。juttle-scripts目录是用于存储 juttle 编程语言脚本的目录。package-lock.json和package.json是 Node.js 项目的通用文件。public/目录是用于存储您的 web 代码、文档或其他静态资源的目录。index.html是您的主要 HTML 文件，您可以将其视为 juttle-viewer 的视图层面板。data/目录是用于存储输入数据的目录，这些数据可以通过脚本读取。
juttle-viewer 使用示例
juttle-scripts 目录是存储 juttle 编程语言脚本的目录，您可以将您编写的脚本文件存放在此目录下。我们这里以一个简单的例子来演示 juttle-viewer 的使用方法。
在 juttle-scripts 目录下新建一个 hello.juttle 文件，文件内容如下：
---- ---- ---- ---------------------------------------------------------------------------- -----
该脚本通过通过 HTTP 读取 [https://api.github.com/repos/sintaxi/sintaxi.github.io/stats/commit_activity] API 返回的数据并计数。
juttle-viewer 项目根目录下运行以下命令以构建 UI 代码并启动本地服务器用于浏览器访问：
--- --- ---
这样，您就可以在浏览器中看到一个交互式的图表。在页面选择要执行的脚本文件，然后，您应该会看到一个计数值，该值表示读取并聚合的行数。
在快速浏览器中的图表数据，可以轻松地通过 Juttle 编写，如下：
---- ---- ---- ----------------------------------------------------------------------------
在此示例中，我们使用 juttle 的 read http 语句从一个 API 中读取一些数据。我们通过指定 -url 选项来设置需要读取的 API URL。
从该 API 中读取的数据提供有用的信息，您可以根据此数据创建信息图表。
总结
到此为止，我们已经学习了如何安装和初始化 juttle-viewer 并创建一个简单的读取和计数 juttle 脚本。希望这个文档有助于您使用 juttle-viewer 创建自己的交互式可视化。如有问题，欢迎通过 Juttle GitHub 项目提交 issues 来获得帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066ef94c49986ca68d87b9