简介
survey-angular 是一个基于 Angular 框架的调查问卷库，通过使用该库可以快速构建丰富多样的调查问卷页面，并支持结果统计和可视化展示。本篇文章将介绍如何使用 survey-angular 库进行开发。
安装及配置
使用 npm 进行安装 survey-angular：
--- ------- -------------- ------
安装完毕后，在项目的 module 中引入 SurveyModule：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- -----------------
-----------
------------- ---------------
-------- -
--------------
------------ -- -- ------------
--
---------- --------------
--
------ ----- --------- --创建调查问卷
在组件中使用 survey-angular 库创建调查问卷：
------ - --------- - ---- ----------------
------ - -- ------ ---- -----------------
------------
--------- -----------
--------- ----- ---------------------------
--
------ ----- ------------ -
------------- -
----- ---- - -
------ -------- -------- ------ ---------
------ -
-
---------- -
-
----- -----------
----- -------------------
------ ----- -------- -- --- ---- -- --- ----------
--------- -----
----------- -----
-------- ------ -------- --------- ----- ------ ---------
-
-
-
-
--
----- ----------- - --- -------------------
--------------------------------------- - ------ ----------- ---
-
-以上代码中，我们使用了一个简单的 json 数据来定义调查问卷内容。在构建 surveyModel 对象后，我们将其渲染到 id 为 "surveyElement" 的 div 中。运行该组件即可得到如下调查问卷页面：
结果统计和可视化展示
通过 survey-angular，我们可以很方便地获取用户填写的调查问卷结果，并进行统计和可视化展示：
------ - --------- - ---- ----------------
------ - -- ------ ---- -----------------
------------
--------- -----------
--------- ----- ----------------------------- --------------------------
--
------ ----- ------------ -
---------- -
----- ---- - -
------ -------- -------- ------ ---------
------ -
-
---------- -
-
----- -----------
----- -------------------
------ ----- -------- -- --- ---- -- --- ----------
--------- -----
----------- -----
-------- ------ -------- --------- ----- ------ ---------
-
-
-
-
--
----- ----------- - --- -------------------
--------------------------------------- - ------ ----------- ---
-- ------
----------------------------------- -------- -- -
----- ------ - ------------
----- ------------ - ----------------------------------------
---------------------- - ---------------------- ----- ---
---
-
-以上代码中，我们在 surveyModel 对象的 onComplete 事件中获取用户填写的调查问卷结果，并将其以 JSON 格式展示在 id 为 "surveyResult" 的 div 中。运行该组件并填写问卷后，可以得到如下调查结果：
-
------------------- -
----- -------- ---------
-
-------- ------ --------
-
-
-总结
通过本篇文章的介绍，我们了解了如何使用 npm 包 survey-angular 进行调查问卷开发，并对结果进行统计和可视化展示。希望本文能够给前端工程师们提供一些参考和指导。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35416