ng-info-chart: 基于自定义HTML标签的交互式可视化组件<sup>*</sup>

doi:10.11925/infotech.1003-3513.2016.06.11

现代图书情报技术

2016, Vol. 32

Issue (6): 88-95 https://doi.org/10.11925/infotech.1003-3513.2016.06.11

应用论文

本期目录 | 过刊浏览 | 高级检索

ng-info-chart: 基于自定义HTML标签的交互式可视化组件^*

陈挺¹(

),王小梅¹,吕伟民^1,²

¹中国科学院文献情报中心北京 100190
²中国科学院大学北京 100049

ng-info-chart: The Visualization Component Based on Customized HTML Tags

Chen Ting¹(

),Wang Xiaomei¹,Lv Weimin^1,²

¹National Science Library, Chinese Academy of Sciences, Beijing 100190, China
²University of Chinese Academy of Sciences, Beijing 100049, China

摘要
参考文献
相关文章
Metrics

全文: PDF (3249 KB) HTML ( 53 )
输出: BibTeX | EndNote (RIS)

摘要

【目的】设计并实现基于模型-视图-控制器(MVC)前端AngularJS框架的可视化组件ng-info-chart。【应用背景】优秀的情报分析平台往往需要使用多个复杂的可视化图谱组合展示分析结果, 需要更有效地构建复杂的、支持大量交互操作的网页端情报分析可视化图谱。【方法】ng-info-chart集成多种可视化图谱, 使用AngularJS自定义扩展标签统一封装, 通过自定义HTML标签直接在页面中调用绘图方法。【结果】ng-info-chart可视化组件随着研究团队情报分析项目不断深入与完善, 现已集成5个第三方可视化类库中11种可视化图谱, 支持IE9+、Firefox等主流桌面浏览器。【结论】利用可视化组件实现数据异步获取、自动检测数据变化与实时图谱绘制等功能, 极大简化了情报分析系统中复杂可视化图谱的开发工作。

	服务

	把本文推荐给朋友
	加入引用管理器
	E-mail Alert
	RSS
	作者相关文章
	陈挺
	王小梅
	吕伟民

关键词 ：可视化, 前端MVC, 自定义扩展标签

Abstract：

[Objective] This research designs and implements the ng-info-chart, a front end visualisation component based on the MVC framework AngularJS. [Context] A good information analysis system requires multiple complex visualzation charts to present the results. Therefore, we need to create an advanced interactive Web-based visualzation charts for the new systems. [Methods] We intergrated visualzation charts with the ng-info-chart and the AngularJS Directive packages. The new component could call the charts Directive directly using a customized HTML tag. [Results] The ng-info-chart visualisation component has intergrated 5 third-party visualisation libraries of 11 types of visual charts. It supports IE9+, Firefox and other popular Web browsers. [Conclusions] The new visualisation component implements data asynchronization, automatic detection of data change, and real-time online visualzation. It also simpilfies the complex visualzation tasks for the information analysis system.

Key words： Visualization Front end MVC Direrctive

收稿日期: 2016-02-18 出版日期: 2016-07-18

基金资助:*本文系国家自然科学基金项目“科学结构特征及其演化动力学分析方法应用研究”(项目编号: 71173211)的研究成果之一

引用本文:

陈挺,王小梅,吕伟民. ng-info-chart: 基于自定义HTML标签的交互式可视化组件^*[J]. 现代图书情报技术, 2016, 32(6): 88-95.
Chen Ting,Wang Xiaomei,Lv Weimin. ng-info-chart: The Visualization Component Based on Customized HTML Tags. New Technology of Library and Information Service, 2016, 32(6): 88-95.

链接本文:

https://manu44.magtech.com.cn/Jwk_infotech_wk3/CN/10.11925/infotech.1003-3513.2016.06.11 或 https://manu44.magtech.com.cn/Jwk_infotech_wk3/CN/Y2016/V32/I6/88

[1]	Chen C. CiteSpace: Visualizing Patterns and Trends in Scientific Literature [CP/OL]. [2015-08-10] .
[2]	Batagelj V, Mrvar A.Pajek——Analysis and Visualization of Large Networks[A] // Graph Drawing[M]. Springer-Verlag Berlin Heidelberg, 2004:77-103.
[3]	Kirk A.Data Visualization: A Successful Design Process [M]. Packt Publishing, 2012.
[4]	La A.Language Trends on GitHub [EB/OL]. [2015-08-30].https://github.com/blog/2047-language-trends-on-github.
[5]	赵越, 陈志伟, 蔡淑惠, 等. 大数据量科学计算数据的动态Web可视化[J]. 现代计算机, 2012(5): 3-6.
[5]	(Zhao Yue, Chen Zhiwei, Cai Shuhui, et al.Web Visualizing for Large Mount of Scientific Computing Data[J]. Modern Computer, 2012(5): 3-6.)
[6]	Darwin P B, Kozlowski P.AngularJS Web Application Development [M]. Packt Publishing, 2013.
[7]	Uri Shaked.AngularJS vs. Backbone.js vs. Ember.js [EB/OL]. [2015-08-01]. https://www.airpair.com/js/javascript-framework- comparison.
[8]	Jain N, Mangal P, Mehta D.AngularJS: A Modern MVC Framework in JavaScript[J]. Journal of Global Research in Computer Science, 2015, 5(12): 17-23.
[9]	Green B, Seshadri S.AngularJS[M]. O’Reilly Media Inc., 2013.
[10]	Lerner A.Ng-book: The Complete Book on AngularJS[M]. Fullstack.io, 2013.

[1]	陈挺,王海名,王小梅. 基于可视化的基金资助热点及其演化发现方法研究^*[J]. 数据分析与知识发现, 2020, 4(2/3): 60-67.
[2]	杨海慈,王军. 宋代学术师承知识图谱的构建与可视化[J]. 数据分析与知识发现, 2019, 3(6): 109-116.
[3]	杨亚楠,赵文辉,张健,谭珅,张贝贝. 基于多视图协同的政策文本可视化研究^*[J]. 数据分析与知识发现, 2019, 3(6): 30-41.
[4]	吴江,刘冠君,胡仙. 在线医疗健康研究的系统综述: 研究热点、主题演化和研究方法^*[J]. 数据分析与知识发现, 2019, 3(4): 2-12.
[5]	吴志强,祝忠明,刘巍,王思丽. CSpace知识分析与可视化功能扩展研究与实践^*[J]. 数据分析与知识发现, 2019, 3(3): 112-119.
[6]	陈挺, 李国鹏, 王小梅. 基于t-SNE降维的科学基金资助项目可视化方法研究^*[J]. 数据分析与知识发现, 2018, 2(8): 1-9.
[7]	杨斯楠, 徐健, 叶萍萍. 网络评论情感可视化技术方法及工具研究^*[J]. 数据分析与知识发现, 2018, 2(5): 77-87.
[8]	王丽, 邹丽雪, 刘细文. 基于LDA主题模型的文献关联分析及可视化研究[J]. 数据分析与知识发现, 2018, 2(3): 98-106.
[9]	谢秀芳, 张晓林. 针对科技路线图的文本挖掘研究: 集成分析及可视化^*[J]. 数据分析与知识发现, 2017, 1(1): 16-25.
[10]	李进华,安仲杰. 基于地理坐标的微博事件检测与分析^*[J]. 现代图书情报技术, 2016, 32(2): 90-101.
[11]	夏立新,谭荧. LOD的网络结构分析与可视化^*[J]. 现代图书情报技术, 2016, 32(1): 65-72.
[12]	彭浩, 徐健, 肖卓. 基于比较句的网络用户评论情感分析[J]. 现代图书情报技术, 2015, 31(12): 48-56.
[13]	郑飏飏, 徐健, 肖卓. 情感分析及可视化方法在网络视频弹幕数据分析中的应用[J]. 现代图书情报技术, 2015, 31(11): 82-90.
[14]	颉夏青, 吴旭. “经典阅读”网络平台可视化技术应用及实现[J]. 现代图书情报技术, 2015, 31(11): 96-103.
[15]	张云, 华薇娜, 袁顺波, 苏保朵. WoS数据库中专利分析论文的主题动态演进研究[J]. 现代图书情报技术, 2015, 31(1): 17-23.

Viewed

Full text

Abstract

Cited

Shared

Discussed