2024年6月6日发(作者：)

实用第

一

f

智慧密集

BSBaSEIEieSI3l3BBI3SeSBI3BBEIISBBBI3BI9@SI36SaaBeEISeBBei3iaEIBBeBI3BaEIEII3SS@ieEl®

基于

Bootstrap

的数据可视化展示技术

屈克诚

，陈晨

（

山东协和学院

，

济南

250107

）

摘

要

：

随着大数据技术的不断发展

，

数据可视化展示的运用越来越广泛

。

各种

Web

前端框架和技术

融入到数据可视化技术中

，

使大量复杂的数据经过数据处理之后

，

通过数据可视化技术展示给用户，辅

助用户进行决策分析

。

通过

Web

前端技术中应用比较广泛的

Bootstrap

框架

、

jQuery

与

ECharts

相结合

，

研究数据可视化平台的构建与实现

。

关键词

:

Bootstrap

框架

；

jQuery

框架

；

ECharts

技术

随着数据可视化技术越来越多的应用到现实生活

中

，

各种数据可视化工具也层出不穷

，

与这些工具相

比

，

使用成熟的前端语言

jQuery

和

ECharts

相结合

，

并

使用

Bootstrap

框架设计界面的数据可视化平台

，

则具

有更强的灵活性

，

并可以根据实际需要进行优化和升

级

。

通过对需求的了解

，

整理数据

，

然后编写代码

，实

现对复杂数据的可视化展现

，

利用数据可视化平台的直

观展示

，

帮助用户更好地进行决策分析

。

基于以上思

考

，

通过

Bootstrap

框架

，

研究构建数据可视化平台的

思路与过程

。

1

ECharLs

ECharts

是遵循

Apache

-2.0

开源协议的一款产品

，

可以免费使用

，

目前版本是

4.0,

具备千万级数据可视

化渲染能力

，

功能丰富

，

配置简单

，

在开源社区的活跃

度非常高

，

受到很多开发人员的欢迎

。

简单来说

，

ECharts

节省了开发人员的时间

，

可以

让开发人员利用

ECharts

产品提供的

API,

方便快捷地

生成各种各样的图表

。

官网不但提供了各种图表的实例

图

，

还提供了实现的范例代码

，

方便开发人员使用

。

官

网给出了详细的配置项手册

，

方便开发人员对数据可视

化平台上的图表进行个性化定制

。

2

jQuery

jQuery

是一个快速

、

简洁的

JavaScript

框架

。

随着

前端技术的发展

，

jQuery

也逐渐受到开发人员的好评

。

在

jQuery

不断发展的同时

，

也逐渐适应

CSS

的发展

。

作为一个优秀的

JavaScript

框架

，

jQuery

有着更灵活的

操作

DOM

的方式

，

可以更好地处理前端数据

，

处理异

步加载

。

作为一个轻量化的

JavaScript

库

，

可以在本地引用

，

也可以使用内容分发网络引用

。同时也可以在浏览器上

查看当前使用的

jQuery

版本

。

3

响应式布局

Bootstrap

是一个用于前端开发的开源工具包

。

作为

一个灵活的框架

，

它受到了很多开发者的欢迎

，

对于

没有美术功底的开发人员来说

，

可以快速地进行响应

式布局

。

响应式布局是近年来随着移动

APP

的广泛应用

,

逐渐兴起的一个概念

。

响应式布局就是采用一套代码,

可以适应多个终端

。

伴随着互联网的发展

，

终端设备的

种类也在增多

，

浏览网页不再是个人电脑的专利

，

手机

和平板占据了更多的比重

。

在这种情况下

，

采用响应式

布局

，

可以兼容多个终端

，

避免开发人员为不同的终

端开发不同的版本

，

既能够减轻开发人员的负担

，

又

能减少版本的迭代

。

从这种角度来说

，

响应式布局就

是为移动互联网浏览而生的

。

使用响应式布局

，

可以

在减轻开发人员工作量的同时

，

提升代码的质量

，

减

少开发时间

，

并且提升用户体验

。

在移动设备逐渐普

及的互联网时代

，

采用响应式布局

，

已经成为了大势

所趋

。

响应式设计与自适应设计的区别

：

响应式开发一套

界面

，

通过检测视口分辨率

，

针对不同客户端在客户端

做代码处理

，

来展现不同的布局和内容

；

自适应需要开

发多套界面

，

通过检测视口分辨率

，

来判断当前访问的

设备是

pc

端

、

平板还是手机

，

从而请求服务层

，

返回

不同的页面

。

作者简介

：

屈克诚

（

1984-

）

男

，

助教

，

本科

，

研究方

向

：

数据可视化及数据挖掘

。

4

Bootstrap

Bootstrap

是前端开发中比较受欢迎的框架

，

简洁且

灵活

。

它基于

HTML

、

CSS

和

JavaScript,

HTML

定义页

面元素

，

CSS

定义页面布局

，

而

JavaScript

负责页面元

素的响应

。

Bootstrap

将

HTML

、

CSS

和

JavaScript

封装成

一个个功能组件，

方便用户使用

。

4.1

Bootstrap

文件的组成

Bootstrap

包括两个部分

，

CSS

文件和

JavaScript

文

件遥在下载源码之后

，

需要将

CSS

文件以外部样式

＜

link＞

标签的形式添加到

＜head＞

标签中

。

在这里需要注意

的是

，

要将外部引入

Bootstrap

样式的语句

，

放在

＜head＞

标签中的其他所有样式表之前

。

BootStrap

的成功运行离

不开

JavaScript

插件

，

对

js

文件的引入

，

可以参照外部

js

的弓

I

入方式

。

但同样需要注意引入的顺序

。

首先是

jQuexy

插件

，

其次是

,

最后引入

JavaScript

插件

。

4.2

页面必要配置

首先需要确保页面使用

HTML5

doctype

。

其次需要

在

＜

meta

＞

标签中

，

配置响应式标签

，

最后将标签写入网

页的

＜head＞

标签中

。

因为

Bootstrap

是为了更好地适应

移动设备而开发的框架

，

所以需要针对移动设备优化代

码

。

而配置

＜

meta

＞

标签

，

正是为了确保移动设备可以正

确地渲染和缩放

。

4.3

下载

Bootstrap

有两种方式

，

（

1

）

可以选择下载预编译和压缩版

Bootstrap

；

（

2

）

下载

Bootstrap

源码

，

需要编译

less

文件

。

下载完成后

，

可以将压缩包解压进行配置

，

也可以

直接使用

npm

安装

。

使用

npm

安装

，

命令为

npm

install

bootstrap

。需要

提前安装

。

4.4

Bootstrap

的组成

bootstrap/

|

—

css/

—

bootstrap

・

css

—

bootstrap

・

css

・

map

—

bootstrap

・

min

・

css

—

bootstrap

・

min

・

—

bootstrap-theme

・

css

—

bootstrap-theme

・

css

・

map

—

bootstrap-theme

・

min

・

css

1

—

bootstrap-theme

・

min

・

css

・

map

1

js/

|—

bootstrap

・

js

I

—

—

bootstrap

・

miri

・

js

—

fonts/

—

glyphicons-halflings-regular

・

eot

—

glyphicons-halflings-regula

「

・

svg

—

glyphicons-halflings-regula

r

・

ttf

—

glyphicons-halflings-regular

・

woff

1

—

glyphicons-halflings-regular

・

woff2

4.5

Bootstrap

源码

bootstrap/

—less/

—

js/

—

fonts/

—

dist/

|—

css/

I

—

js/

—

fonts/

—

docs/

1

—

examples/

less

中包含了

CSS

的源码

，

js

中存放着

js

文件的源

码

，

而

fonts

中存放的是字体图标的源码

。

同时用户也

可以在

examples

里查看样例进一步了解

Bootstrap

。

4.6

Bootstrap

栅格系统

Bootstrap

的栅格系统最多可以分为

12

列

，

通过一

系列的行与列的组合来进行页面布局

。

针对不同的手机

屏幕

，

栅格系统会进行不同的设置来满足用户的需要

。

利用列宽和

container

的最大宽度来自适应布局

。

在屏

幕比较小的手机和平板设备上

，

12

列的栅格系统可能

是堆叠式排列的

，

但在桌面设备比如个人电脑上

，

会变

成水平排列

。

5

短视频数据可视化平台

数据可视化采用的素材是短视频数据

，

随着短视频

的不断发展

，

直播带货也成为电商发展的新方向

。

而通

过分析短视频软件中的粉丝数量

，排名靠前的播主上传

视频类型等数据

，

为选择推广产品的用户提供订阅服

务

，

为他们分析决策提供依据

，

是短视频数据可视化平

台的目的

。

5.1

数据整理

首先对短视频的数据进行整理

，这里获取数据的方

式主要采取网络查询的方式

，

对各个短视频平台中的相

关数据进行收集与整理

。

5.2

建立数据库

，

存储数据

采用

SQL

Server

数据库

，

对数据进行存储

。数据表

分为短视频平台表

、

短视频粉丝排名表、

短视频商品品

类排名表等遥在后台对数据进行分析

，

把数据组织成

JSON

格式

，

方便前端

ECharts

进行展示

。

5.3

ECharts

展示

使用

ECharts

对数据进行展示

，

对后端的数据处理

之后

，

组织成

JSON

格式

。

JSON

是一种轻量级的数据交换格式

。

它基于

EC-

MAScript

的一个子集

，

采用完全独立于编程语言的文本

（

下转第

152

页

）

、

's

脑集譎繆丽

SreeaeBBHI*>SBSI3EIEIEIEIffiEBBI!IBBBeaeBI3BigBlslBBai3IIBBEISBHI3glBBIIIIIIBSSI3aBIIIglEISa

3BEIQISB>E

实用第

一

f

智慧密集

2.2.5

远程移动终端安全功能

参考文献

[1]

罗文俊

，

闻胜莲

，

程雨

.

基于区块链的电子医疗病

远程终端安全设计

，

保证移动终端安全连接到医疗

信息系统的大数据中心

，

支持移动医疗应用

，

并设计移

动终端认证以及系统网络的安全通信

。

终端认证模块设

历共享方案

[J]

•

计算机应用

，

2020,

40

(1)

:

157-161.

[2]

冯基

，

王明芹

，

赵媛

，

等

•

信息安全管理的建设在

计是以系统边界安全为前提

，

接入到系统的控制模块

，

提供终端认证功能

，

并保证远程终端设备可以安全地连

医院信息化建设中的作用探讨

[J]

.

科学与信息化

，

2019

，

000

(018)

:

130

，

132.

接到医院信息系统

。

通信安全模块保证系统的公共通信

空间安全

，

确保远程终端和医院信息服务系统之间通信

⑶魏智

，

黄昊

.

医院信息系统的数据备份及恢复的研

的安全性

。

远程终端设计虚拟桌面技术支持对医疗数据

究与应用

[J]

•

中国数字医学

，

2018,

⑻

：

36-38.

[4]

肖扬

，

郭志旭

，

于海铸

，

等

.

军队互联网医院信息

的安全访问

，

并设计良好的客户端操作界面

，

方便用户

通过

Web

浏览器对系统功能进行访问

。

3

结语

医疗信息安全是医院信息化建设中的关键问题

，

医

安全体系的构建与应用

[J]

•

中国数字医学

，

2017,

012

(008)

:

20-22

，

61.

[5]

许耀文

.

信息安全管理的建设在医院信息化建设中

疗信息安全系统的设计与应用

，

可以提高系统数据的安

全性

，

保证医院数据交互和共享的完整及准确

。

医院数

的作用探讨

[J]

.

现代经济信息

，

2018

，

(08)

:

168.

据安全关系到整个医院信息系统的安全性

，

因此医疗信

息安全系统中数据安全防护是重要内容

。

亠更仝仝从仝企仝从亠

4

亠北亠

4

亠

4

亠期亠坎亠坎亠欢亠更从仝从仝企亠

4

亠

4

亠期亠

4

亠

4

亠期亠坎仝

(

上接第

149

页

)

容易查找

，

所以在这种情况下

，

可以使用

JSON

格式化

校验工具来判断

JSON

数据格式是否正确

。

利用

HTML

、

CSS

和

Bootstrap

布局

,

利用

ECharts

格式来存储和表示数据

。

简洁和清晰的层次结构使得

JSON

成为理想的数据交换语言

。

易于人阅读和编写

，

同时也易于机器解析和生成

，

并有效地提升网络传输

效率

。

JSON

类似于一个键值对的组合

，

在处理数据的时

将组织好的数据展现出来

，

方便用户查看

，

对用户在电

商选择带货主播和投放货源时

，

给予决策上的辅助

。

参考文献

[1]

D

.

Crockford

The

application

/

json

Media

Type

for

JavaScript

Object

Notation

(JSON).

[2]

TB

&Lt,

T

Com&Gt

The

JavaScript

Object

Notation

(JSON)

Data

Interchange

Format.

候

，

如果需要将

JSON

字符串转换成

JS

对象

，

要使用

()

方法

。

如果需要将

JSON

对象转换为

JS

字

符串时

，

要使用

ify()

方法

。

与

XML

相比

，

JSON

语法格式简单

，

层次结构清

晰

，

更容易阅读

，

并且在数据交换方面

，

更加节约传输

[3]

Bootstrap

中文网

.

Bootstrap

前端框架

.

数据所占用的带宽

。

但是

JSON

的数据节点繁琐

，

并不

(

上接第

147

页

)

⑶

张志刚

，

黄军勤

.

基于机器视觉的商品条码质量检

参考文献

测方法

[J]

.

包装工程

，

2019

，

40

(9)

:

154-160.

[4]

BarretoJP,

ental

matrix

for

cameras

[1]

许晓伟

，

王知衍

，

曹晓叶

，

等

.

基于灭点的倾斜畸

变车牌图像快速校正方法研究

[J]

•

计算机应用研

with

radial

distortion

[C]

Proceedings

ofIEEE

Comput

­

er

Society,

2005:

625-632.

[5]

h

，

，

man

，

tive

In

­

究

，

2008

，

25

(8)

:

2405-2406

，

2409.

[2]

ni,

野'

Documentskew

detection

based

on

local

reg

ion

complexity

冶

,1993

IEEE

InternationalConferenceon-

variant

Representation

Using

Implicit

Algebraic

Curves

[J]

.Image

and

Vision

Compute.1991

，

9

(2)

:130-136.

Document

Analysis

and

Recognition

，

1993:

49-52.