摘 要

随着科学技术的进步，数据可视化技术得到了蓬勃的发展，特别是针对大型数据的可视化分析。面对大量数据，仅通过人工分析并深刻理解乃至进一步生成正确的概念和看法几乎是不可能的。所以，数据可视化应运而生。

本项目针对细胞器数据，通过时间、名称、个数分布三种规则方式进行植物细胞器相关数据展示，将植物相关数据进行可视化呈现，让关联性更加明确，让相关人员进行研究时更加方便、快捷。

本项目通过网页前端展示，采用jquery框架和bootstrap进行前端界面设计，表单展现利用echarts.js，直观的展示数据之间的联系，使数据间的关系更加明确。

关键词：数据可视化；植物细胞器； jquery ； echarts ；bootstrap

Scientific visualization of plant organelle gene database and its application

ABSTRACT

With the progress of science and technology, data visualization technology has developed vigorously, especially for large data visualization analysis. Faced with large amounts of data, it is almost impossible to generate correct concepts and opinions only through manual analysis and profound understanding. So data visualization came into being.

This project aims at the cell data, through time, name, number distribution of three kinds of rules of data related to plant organelles show, Visualizing plant related data, let the relationship more clearly, so that relevant personnel of more convenient and fast.

The project through the front page display, using the jQuery framework and bootstrap front-end interface design, form display, using echarts.js, intuitive display of data links, so that the relationship between the data more clearly.

Key words：Data visualization ; plant organelles ; jquery ; echarts ; bootstrap

目 录

1 绪论 1

1.1 研究背景 1

1.2 国内外研究现状 1

1.3 研究目的与研究内容 2

1.3.1 研究目的 2

1.3.1 研究内容 2

2 相关研究基础和需求分析 4

2.1 开发技术简介 4

2.1.1 HTML 4

2.1.2 JavaScript 5

2.1.3 CSS 6

2.1.4 jQuery 7

2.1.5 bootstrap 8

2.1.6 Echarts.js 8

2.2需求分析和总体设计 9

2.2.1 页面需求分析 9

2.2.2数据展示需求分析 9

3 页面实现 11

3.1 数据提取的具体实现 11

3.2主页的具体实现 15

3.3整体列表的具体实现 21

3.4折线图的具体实现 34

3.5 气泡的具体实现 41

结 论 45

致 谢 46

参考文献 47

1 绪论

1.1 研究背景

近年来，随着网络技术、电子商务技术等的迅速发展，可视化技术涵盖了更多的内容。所谓可视化是对大型数据库或文件中的数据进行可视化，使人们能用更加直观的方式来看到数据及结构关系，相当于对于数据进行第一步简单的分析。随着Web跨平台应用的发展，用户通过浏览器而无需其他终端软件就可以浏览丰富的信息。数据可视化的范围和能力也随着web应用不断延伸，在可视化工具的开发中，国外比较有代表性的有：Prefuse、D3.js等可视化开发库及highcharts、Google chart 等可视化开放工具，国内当前比较热门的工具为商业级数据图表echarts，包含了数十种图表类型。随着数据可视化的发展，也包含了多维非空间数据的信息可视化，用图像形式来表达人类的感知。围绕着数据可视化也出现了很多可视化的工具方便对数据进行处理和编辑。所以，数据可视化技术是现如今大热的技术。而植物数据量大且关联性无法直观看出，所以对其进行可视化显得很有意义。

1.2 国内外研究现状

在图表类目下的可视化工具的开发中，国外比较有代表性的有：Prefuse、D3.js等可视化开发库及highcharts、Google chart 等可视化开放工具，国内当前比较热门的工具为商业级数据图表echarts，包含了数十种图表类型。随着数据可视化的发展，也包含了多维非空间数据的信息可视化，用图像形式来表达人类的感知。一般细胞器内数据采用图表形式展示数值和表现各个细胞器之间的数据关联，细胞器内各种数据的展示样式有直方图、散点图、等高图或者密度图等。随着数据可视化的发展，也包含了多维非空间数据的信息可视化，用图像形式来表达人类的感知。围绕着数据可视化也出现了很多可视化的工具方便对数据进行处理和编辑。例如：Vitapad 是为路径分析数据的数据可视化工具，它是一个跨平台的应用，允许用户常见和修改生物通路图和合×并微阵列数据。DirectX是一种应用程序接口，应用于电子游戏的开发，但局限于windows环境，跨平台性相对教差。VTK是一种基于Unix和Windows环境面向对象的可视化工具，具有开源、代码可移植、跨平台等优点，等一系列的开发工具。

1.3 研究目的与研究内容

1.3.1 研究目的

植物的相关数据十分复杂，数据量很大且关联性不高，直接进行研究和分析会有很大的困难。而数据库的查询结果一般采用报表形式输出，不能直接显示数据之间的关联、走势和比较关系，与用户的交互不直接。人们已经不满足于仅仅对数据进行存储，而希望能对数据进行分析和进一步的应用，从大量的数据中得到所需要的信息。通过前端网页展示，强调了数据之间的关联性且让数据间的关系一目了然。查询相关数据也显得十分麻烦，通过时间和首字母对数据进行排序后，会让这些问题迎刃而解。其中，可视化的数据源按用户指定条件选取，可视化结果按指定关联展示。

1.3.1 研究内容

1. 该可视化界面的具体内容有：

I) 按名称顺序进行可视化呈现