slush-microstrategy-custom-visualization是一个基于 MicroStrategy 平台定制化可视化组件的快速开发工具。本文将会介绍如何使用该 npm 包来实现一个自定义的 MicroStrategy 可视化组件。
准备工作
首先，你需要在本地环境中安装 Node.js 以及 npm。然后在命令行中执行下面的命令，安装 slush 和 slush-microstrategy-custom-visualization：
npm install -g slush slush-microstrategy-custom-visualization
接着，在 MicroStrategy Web 中需要创建一个新的可视化插件，可以从 MicroStrategy 管理工具中完成。在该插件的配置页面中，需要选择使用 Advanced Custom Visualization，并且需要勾选生成 info.json 的选项。
使用 slush-microstrategy-custom-visualization
使用 slush-microstrategy-custom-visualization 创建自定义的可视化组件非常容易，只需要执行以下命令即可：
slush microstrategy-custom-visualization
在执行命令后，您将被要求输入一些信息，例如组件的名称，描述和作者等信息。完成填写后，将自动生成一个从模板中生成的 MicroStrategy 可视化组件。
组件结构解析
现在让我们来详细解析生成的模板组件包含哪些文件和目录：
my-viz-demo/ ├─ src/ # 组件源文件，包括脚本和样式 │ ├── index.js # 入口脚本 │ └── style.css # 样式文件 ├─ info.json # MicroStrategy 插件配置文件 ├─ icon.png # 自定义 MicroStrategy 显示的图标 ├─ README.md # 组件使用文档 └─ package.json # 组件的 NPM 配置文件
其中，info.json 是非常重要的文件，该文件指定了插件的名称，描述，图标等元数据信息。MicroStrategy Web 在加载自定义可视化组件的时候，就是通过读取该文件来加载插件的。
实现自定义组件
在 src/index.js 中，您可以编写一些使用 D3.js 或 React.js 等任意前端框架的脚本来实现自定义的可视化组件。以下是一个示例脚本，使用 D3.js 实现一个条形图：
-- -------------------- ---- -------
------ - -- -- ---- -----
------ ------- ----- --------- -
-------------------- ------- -
------------- - --------
------------ - -------
-
---
- ------
--
-------- -
----- ---- - ------------------
----- ----- - --------------------------
----- ------ - ---------------------------
----- ------ - - ---- --- ------ --- ------- --- ----- -- --
----- ---------- - ----- - ----------- - -------------
----- ----------- - ------ - ---------- - --------------
----- --- - --
----------------------
--------------
-------------- ------
--------------- --------
----- ------ - --------------------------- ------------------------ -------------
----- ------ - ------------------------------------------------------ --------------
----- ----- - --------------------
----- ----- - ----------------------
--------------------------------- -------------------------------------------------------
--------------------------------- ---------------------------------- - ------------------------------
----- ---- - ---
------------
------------------ ------------------------------------------
------------------
-----------
-------------
---------- --
---------- --- -- -- ----------
-------------- --- -- ----------
--------------- -------------------
------------- -------------
-
-安装依赖并打包
完成组件代码的编写后，还需要在组件目录下执行以下命令，安装依赖并打包：
npm install npm run build
执行 npm run build 命令后将会在 dist/ 目录下生成经过编译和压缩的组件文件，我们将该目录中的所有文件打包成一个 GZip 文件后，可上传到 MicroStrategy 平台中使用。
使用自定义组件
最后，您需要在 MicroStrategy Web 中通过添加新的元素，选择您自定义的可视化组件，以及其配置文件 info.json 和图标 icon.png，然后就可以在报表设计器中使用您自己的可视化组件了。
通过自定义可视化组件，您可以非常方便地定制符合自己业务需求的可视化报表，极大地提高了报表的可读性和可视化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c6d