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