在前端开发中，常常需要使用数据可视化来展示数据，而 MontageJS 就是一个用于构建数据可视化的 JavaScript 框架。而 @activfinancial/montage-viewer 是基于 MontageJS 开发的一个数据可视化组件，可以帮助开发者快速构建出功能丰富的数据可视化页面。
安装
在使用 @activfinancial/montage-viewer 前，需要先进行安装。
通过 npm 安装：
npm install @activfinancial/montage-viewer
当然，在安装前，需要确保已经安装了 MontageJS 框架。
开始使用
引用组件
在需要使用 @activfinancial/montage-viewer 的页面中，需要先引用该组件。可以使用以下方式进行引用：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------ ------------ ----- ------------------------- ------------------- --------------- ----- --------------- ---------------------------- ------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- ------ ---- ------------------ -------- --- ------ - --- ---------------- -------------- - ---------------------------------- --------- ------- -------展开代码
在这个例子中，我们在 head 标签内引用了组件的 CSS，同时在 body 标签内引用了组件的 JS。然后，我们在 body 标签内添加了一个 id 为 "viewer" 的 div 元素，并在 JS 中将这个 div 元素赋值给 viewer.element 属性。
数据源
在 @activfinancial/montage-viewer 中，需要设置一个数据源来展示数据。数据源可以是一个 JavaScript 对象、一个 URL 地址或者直接在 HTML 中引用一个数据源。以下是这三种数据源的示例：
JavaScript 对象
-- -------------------- ---- ------- --- ---- - - -------- - - ---- ----- ------ ---- -- - ---- ------- ------ ------ -- - ---- ------ ------ ----- - -- ----- - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- - - -- ----------------- - ------------------------------------------展开代码
在这个例子中，我们先定义了一个 JavaScript 对象作为数据源，然后使用 MontageViewer.DataSource.fromObject() 方法将其转换为 @activfinancial/montage-viewer 可以使用的数据源。
URL 地址
viewer.dataSource = MontageViewer.DataSource.fromUrl("data.json");
在这个例子中，我们将数据源的 URL 地址传递给 MontageViewer.DataSource.fromUrl() 方法，@activfinancial/montage-viewer 就会通过 AJAX 请求获取数据源。
HTML 中的数据源
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------ ------------ ----- ------------------------- ------------------- --------------- ----- --------------- ---------------------------- ------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- ------------------------ ------------ - ---------- - - ------ ----- -------- ---- -- - ------ ------- -------- ------ -- - ------ ------ -------- ----- - -- ------- - - ----- -- ------- -------- ------ -- -- - ----- -- ------- ------ ------ -- -- - ----- -- ------- ---------- ------ -- - - - --------- ------- ------ ---- ------------------ -------- --- ---- - ---------------------------------------------------------- ----------------- - ------------------------------------------ -------------- - ---------------------------------- --------- ------- -------展开代码
在这个例子中，我们在 head 标签内使用 type="text/montage-data" 和 id="myData" 将 JavaScript 对象转换成了 HTML 的一部分，并在使用时使用 JSON.parse() 方法将其转换为 JavaScript 对象。
列表
在 @activfinancial/montage-viewer 中，使用 MontageViewer.List 组件来展示一个列表视图。以下是一个列表视图的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------ ------------ ----- ------------------------- ------------------- --------------- ----- --------------- ---------------------------- ------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- ------- - ------- ------ - -------- ------- ------ ---- ------------------ -------- --- ---- - - -------- - - ---- ----- ------ ---- -- - ---- ------- ------ ------ -- - ---- ------ ------ ----- - -- ----- - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- - - -- --- ------ - --- ---------------- ----------------- - ------------------------------------------ -------------- - ---------------------------------- --- ---- - --- --------------------- -------------- - ----- --------- ------- -------展开代码
在这个例子中，我们创建了一个 MontageViewer.List 组件，并将其赋值给 viewer.content 属性，这样 @activfinancial/montage-viewer 就会展示一个默认样式的列表视图。
表格
在 @activfinancial/montage-viewer 中，使用 MontageViewer.Table 组件来展示一个表格视图。以下是一个表格视图的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------ ------------ ----- ------------------------- ------------------- --------------- ----- --------------- ---------------------------- ------------------- ----- ---------------- --------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- ------- - ------- ------ - -------- ------- ------ ---- ------------------ -------- --- ---- - - -------- - - ---- ----- ------ ---- -- - ---- ------- ------ ------ -- - ---- ------ ------ ----- - -- ----- - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- - - -- --- ------ - --- ---------------- ----------------- - ------------------------------------------ -------------- - ---------------------------------- --- ----- - --- ---------------------- -------------- - ------ --------- ------- -------展开代码
在这个例子中，我们创建了一个 MontageViewer.Table 组件，并将其赋值给 viewer.content 属性，这样 @activfinancial/montage-viewer 就会展示一个默认样式的表格视图。
总结
本文介绍了 @activfinancial/montage-viewer 的使用方法，并提供了相应的示例代码。通过本文的介绍，你可以了解到如何引入 @activfinancial/montage-viewer 组件、如何设置数据源以及如何使用列表和表格视图展示数据。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138361
