南网数据中心-可视化技术规范-v2 2

1、Q/CSG企业标准 中国南方电网责任Q/CSG 1210001.1-2013代替Q/CSG11817-2010可视化技术规范2015-发布2015-实施中国南方电网责任发布 Q/CSG 1210001.1-2013目次1.前..1.5.言3编制目的3编制范围3编制原则4规范性引用文件4术语和定义52.3.4.可视化体系架构6展示载体规范7显示控制规范...交互控制9显示输出15场景调度42屏幕自适应43应用建设规范555.5.1.组件封装5...组件设计57组件开发64组件封装6

2、4组件入库655.2.主题组装6...主题组装思路65主题库规划66主题设计67主题组装实现765.3.场景编排80...场景库建设思路80场景库规划81场景编排设计84场景编排实现88数据集成规范916.6.1.与数据中心集成9..3.业务分析数据接入93实时数据接入93非结构化数据936.2.GIS 平台集成9..3.集成方式94空间信息服务94WebGIS 应用框架946.3.外部视频集成9..3.视频信息分类95

3、客户端集成要求95服务端集成要求96开发部署规范977.7.1.软件平台规范971 Q/CSG 1210001.1-2013测试规范9..7.2.3.测试环境98单元测试99集成测试997.3.平台部署规范100..3.部署环境管理100部署应用结构101部署流程1012 Q/CSG 1210001.1-2013言1. 前公司中长期发展战略中提出了成为服务好、管理好、形象好国际先进电网企业的战略目标。强化数据在企业管理中的应用，充分利用先进的可视化技术和各类展示载体，建立反映企业状况及运营状态的运营全景可视化展示平台。可视化被纳入至南网

4、数据中心总体架构中，要求通过信息展现为业务信息提供统一、集中、互动的可视化服务。对可视化展现技术的要求包括：为应用提供全方位的基础技术服务，应用先进的可视化和人机交互技术，建设高级可视化展现工具，实现业务管理可视化、和生产操作可视化、决策支持可视化等，增强用户体验。为更好支撑可视化建设工作，编制可视化技术规范，目的是统一信息可视化建设各项工作中应采用的技术路线，统一各类可视化展现技术应具备的基础功能要求，整合资源，确保可视化建设工作的技术先进、建设规范、效果良好、简便易用，为信息展现与可视化建设提供规范支持，促进各项工作的顺利开展。1.1. 编制目的可视化平台技术规范的编写目的是从技术上对全景

5、可视化应用的架构设计、展示载体、显示控制、应用建设、数据接入等提出技术界定与要求说明，为各类可视化应用建设、可视化场景设计、以及编码开发提供指导。1.2. 编制范围本规范提出了对南方电网业务信息可视化的总体框架和技术要求，用于规范指导未来数据应用展现功能的设计、开发与系统建设工作。3 Q/CSG 1210001.1-20131.3. 编制原则前瞻性原则可视化需满足当前需要的同时，着眼于未来发展的趋势；采用主流可视化开发工具和先进的设计理念，应用最新可视化应用技术与展示产品，保持可视化的软件技术领先。同时能够适应南方电网全面展现公司经营管理成果和企业日常运营监控展示的真实需要。全局性原则遵循纵向

6、贯通、横向连接的管理目标要求，既能够适应面向公司内部的经营管理成果和企业日常运营监控展示的真实需要，同时还需满足面向上级、兄弟单位领导的视察演示需求。扩展性原则可视化系统架构设计具有良好的扩展性，支持主题及场景的动态组合和定制，同时软硬件能够根据应用需求的发展进行灵活的配置。同时针对拼接屏幕墙、触控一体机、个人PC、移动终端等不同的显示载体，展示场景能达到自适应不同分辨率，从而达到最小维护成本、最佳用户体验的目的。 普适性原则本框架中规定的技术规范作为普适性规范，在实际应用中允许用户根据实际业务情况进行扩充调整。1.4. 规范性引用文件下列文件中的条款通过本部分的引用而成为本部分的条款。凡是标

7、注日期的引用文 件，其随后所有的修改单（不包括勘误的内容）或修订版均不适用于本部分，凡是未标注日期的引用文件，其最新版本适用于本部分。1、南方电网“十二五”信息化规划2、南方电网基本数据集标准3、南方电网数据模型规范4、南方电网企业信息模型4 Q/CSG 1210001.1-20135、南方电网信息分类与编码规范6、南方电网信息安全保障体系7、南方电网数据中心数据接口单元8、南方电网数据中心数据交换规范9、南方电网数据中心数据质量管理规范10、南方电网数据中心元数据管理规范1.5. 术语和定义可视化：使某事物图像化、图形化，将任何抽象的事物或者过程变成图形图像，从而 能够清晰、直观地呈现出来的

8、一种表示方法。可视化（业务）数据：用于支持可视化展示的各业务数据。展现载体：用于显示展现内容的硬件设备，如个人电脑显示器、触摸屏、大屏幕、手 机等。图形图表：具有可读性和观赏性的图形、图表、动画等展示元素。交互：用户通过与系统之间的对话和互动来操纵和理解数据的过程，可以辅助拓 展表达空间，让用户更好的理解数据和探索数据。交互控制：通过消息传递实现不同屏幕之间的内容互动操作。布局框架：能够根据配置内容，在运行时即时划分出多个区域，供放置相应展现主题 的总体界面。展示组件：技术组件与数据绑定，构成展示主题的最细粒度展示单元，表示具体的业 务应用，可视化组件具有易维护和可重用等特点。展示主题：具有相

9、同业务特征的展示组件集合，集中表达某一领域的数据关系和业务 洞察。主题视图：根据展示需求筛选展示组件进行拼接，并建立组件之间关系，形成该主题 的展示画面。展示场景：根据不同的服务对象，通过展示主题的灵活组合，构建一套完整的可视化 展示内容。一个展示场景可以关联一个或多个展示主题。5 Q/CSG 1210001.1-20132. 可视化体系架构可视化体系框架描述了南方电网公司可视化平台总体架构，从上至下依次为可视化载体层、显示控制层、应用层，以及数据层。具体架构如下：第一层是可视化载体层，包括拼接屏幕大屏、触控一体机、个人 PC、移动 Pad、以及 智能手机 5 种设备；第二层是显示控制层，包括

10、交互控制、场景调度、硬件识别与自适应； 第三层是应用展示层，包括场景库调度、主题库组装；第四层是数据层，平台依托于南方电网数据中心。对于具体各层，包括以下内容：展示载体层可视化平台载体，包括拼接屏幕大屏、触控一体机、个人 PC、移动 Pad、以及智能手机，所有可视化场景投射到展示载体时，均通过自适应机制，根据不同载体的性质及分辨率特征，自适应调整最优显示模式。显示控制层6 Q/CSG 1210001.1-2013显示控制层控制主要是对显示设备的输出和对展示内容的导调与控制。包括的组件有交互控制(多屏互动控制、网络通讯控制)、显示输出（图形图表、交互）、场景调度（场景编排控制、组件调用及配置）、

11、以及硬件识别与自适应（自适应布局调整、前端适配机制、自适应组件）等。应用层应用层构建须按照快速纵览公司概况、综合展现运营动态、突出体现科学发展、展示科技创新、主动承担社会责任、关注聚焦新闻动态、适应引领外部环境的设计理念，形成相关展示域、展示子域及展示主题。数据层南网可视化依托于南网数据中心，在数据中心基础之上开展可视化应用的建设。对于大部分的结构化数据和实时数据，按照南网数据中心的标准接口规范，进行数据接入；对于 GIS 数据，按照 GIS 平台标准接口规范，通过企业服务总线（ESB）的形式来调 用 GIS 服务；对于视频监控数据，由远程视频监控系统进行实时接入。 3. 展示载体规范南方电网

12、可视化平台载体，包括拼接屏幕大屏、触控一体机、个人 PC、移动 Pad、以及智能手机，所有可视化场景投射到展示载体时，均通过自适应机制，根据不同载体的性质及分辨率特征，自适应调整最优显示模式。第一类屏幕：拼接屏幕大屏规格要求：大屏幕拼接系统最佳为 DLP 背投，分辨率为 1024*768/1400*1050，尺寸为 50 英寸、60 英寸、67 英寸、70 英寸、80 英寸等，拼接缝为 0.2mm-0.5mm，无缝拼接效果最佳。浏览器要求：Google Chrome 或 IE10 以上，支持 HTML5+CSS3操作系统要求：64 位 windows以下为总部基地信息监控中心大屏规格：7 Q/

13、CSG 1210001.1-2013总部基地信息监控中心大屏第二类屏幕：触控一体机、个人 PC触控一体机规格要求：触控一体机屏幕类型为 LED，屏幕尺寸 55 寸或 65 寸，最佳分辨率 1920（H） 1080（V），支持 1080P。浏览器要求：Google Chrome 或 IE10 以上，支持 HTML5+CSS3操作系统要求：64 位 windows触控一体机规格个人 PC 机规格要求：横向分辨率大多介于 19201024 之间，默认支持1024768，投影默认1024768。浏览器要求：新增 PC 建议 Google Chrome 或 IE10 以上，支持 HTML5+CSS3操作

14、系统要求：64 位 windows8 Q/CSG 1210001.1-2013个人 PC 规格第三类屏幕：移动 Pad、以及智能手机移动 Pad、以及智能手机，支持常用的三种操作系统（WIN/IOS/Android），设计展示场景时需要考虑竖屏与横屏之间的分辨率变换。移动 Pad、以及智能手机规格4. 显示控制规范4.1.1. 交互控制交互控制主要解决人机交互问题，除了支持正常的鼠标点击进行人机交互之外，须引入移动控制交互技术，主要为多屏互动控制。9 Q/CSG 1210001.1-20. 基本思路为有效屏蔽不同应用终端操作系统的不同，以及在终端上进行相关应用服务的安装，采用

15、由应用服务器端主动推送的方式实现对受控端展示内容的控制。通过构建操控终端与应用服务器端的通讯连接，实现由控制端发命令给应用服务器 端，通过应用服务器端向受控终端发送控制命令的方式，实现对受控终端操作的模拟实现。 交互控制思路图. 技术要求屏幕互动涉及的主动推送技术要求采用基于 WebSocket 技术实现。Web Socket protocol 是 HTML5 一种新的协议，它实现了浏览器与服务器全双工通信，互相沟通的 Header 是很小的-大概只有 2 Bytes，且为 Server push(服务端主动推送)，但需要客户端浏览器与应用服务器端支持 WebSocket。客户端

16、通过 80 或者 443 端口和服务器进行请求握手,服务器根据 http header 识别是 否一个 websocket 请求,如果是,则将请求升级为一个 websocket 连接,握手成功后就进入 双向长连接的数据传输阶段。10 Q/CSG 1210001.1-20. 交互分类.1.移动终端与中心大屏交互移动终端与中心大屏交互模式图为了遵循移动安全标准，只有在监控大厅内 Wifi 覆盖的区域方可与大屏信号进行交互 控制，并且从大屏二维码扫描至手机的仅是控制界面（数字模拟遥控器），只下载功能按钮，并不下载真实业务数据信息。11 Q/CSG 1210001.1-

17、2013手机控制界面同时，用户也可以备选使用触控控制端（触控一体机）进行实时控制大屏的场景展示与切换，与移动终端（数字模拟遥控器）不同的是，移动终端（数字模拟遥控器）仅是单向输出控制指令至中心大屏，中心大屏随即作出响应；而触控控制端（触控一体机）与中心大屏则是双向的信号交互，执行通讯同步，并在触控控制端（触控一体机）实时显示与中心大屏一致的真实数据。.2. 与触控一体机人机交互基于自适应模式下的框架沿用，为了更好的体现触控一体机的人机交互特征，在共享底层数据、共享主题库的同时，在展现层利用 FLEX 框架开发仅针对触控一体机的控制台， 以提升用户体验。如下图，底部上浮框可根据用户

18、权限，个性化推送用户关注指标、主题、场景、工具、 或单点集成其它系统的入口，控制台主页面开放于领导，用户只需将底部上浮框内的任何元素用手指点住往上拽动，并随意摆布位置，控制台应记住用户最后一次操作的界面元素及位置风格,在下次登录时应保存上次界面一致。12 Q/CSG 1210001.1-2013触控一体机控制台首页面在点击“”标记向下隐藏掉“底部上浮框”之后，如下图，用户可以专注于自己关注的指标进行在线监控、或辅助决策。触控一体机控制台效果图13 Q/CSG 1210001.1-20.3. 触控一体机双屏交互触控一体机双屏交互，即利用两台并排的触控一体机组合显示场景内容，以其

19、中一块屏幕作为主显示屏，另外一块作为辅助屏，辅助主屏进行直观展现。如下图，例如企业级指标展示场景，可以将单屏的钻取动作切换成右侧辅助屏进行展示，展示效果更加直观，科技感冲击力度更加明显。这种触控一体机双屏交互的场景，可以用于用户办公室、或会议室等场所。触控一体机双屏交互效果图14 Q/CSG 1210001.1-20134.1.2. 显示输出. 图形图表.1.设计要求在场景界面设计过程中，基于图形图表多样化展示数据，不同图形适用于不同数据类型。根据数据的特性分类，如展示的维度个数、指标个数、维度元素个数等，选择合适的图形。梳理主流通用的图形图表，定义其使用说明和适用

20、数据类型，作为设计参考，规范设计样式。1. 柱状图柱状图，又称条状图、条形图、柱形图，是最常使用的图表类型之一，通过垂直或水平的条形展示各维度字段的分布情况。 簇状柱形图15柱形图组合瀑布图阶梯瀑布图正负轴条形图簇状条形图堆积条形图条形图簇状柱形图堆积柱状图温度计式图表时空叠加柱状图 Q/CSG 1210001.1-2013堆积柱形图温度计式图表16温度计式图表技术特点：簇状柱形图比较各个类别的数值；对付通过比较实际值和预测值的差别，来分析指标完成情况 数据类型：实际值/预测值（计划值） 堆积柱形图技术特点：堆积柱形图显示单个项目与整体之间的关系， 它比较各个类别的每个数值所占总数值的大小。通

21、过垂直的长条比较基于维度元素的每一个值在总值中的贡献度进行比较；用于在某个维度上强调某个指标总值时使用 数据类型：单维度/多指标 簇状柱形图使用说明：簇状柱形图比较各个类别的数值；通过垂直的长条比较基于维度元素的值大小；当维度元素排序不重要或者展示元素数量直方图时使用 数据类型：单维度/多指标 Q/CSG 1210001.1-2013时间叠加柱形图正负轴条形图簇状条形图17簇状条形图使用说明：通过水平的长条基于维度元素比较值大小；当图形上的值表示持久性或元素名称太长时使用 数据类型：度/单指标 正负轴条形图使用说明：展示不同维度的正向指标和反向指标的对比情况 数据类型：正向指标/反向指标，通常

22、用于收入、支出等 时间叠加柱形图使用说明：通过时间进度条的渐进播放来表现不同时期的数据变化趋势 数据类型：不同时期的指标数据 Q/CSG 1210001.1-2013堆积条形图条形图组合瀑布图阶梯瀑布图18阶段瀑布图组合瀑布图使用说明：瀑布图是数据可视化分析中常见的一种图形，对于一系列具有累计性质的正值/负值具有很好的展示功能，既可以帮助理解数据大小，又能直观的展示出数据的增减变化，反映数据在不同时期或受不同因素的影响结果。 数据类型：度/数量类指标 柱形图使用说明：对比不同对象的该指标值在各维度的对比情况 数据类型：度/单指标 堆积条形图使用说明：通过水平的长条基于维度元素对每一个值在总 值

23、中的贡献度进行比较；当图形上的值表示持久性或元素名称太长时使用 数据类型：单维度/多指标 Q/CSG 1210001.1-20132. 折线图折线图是使用率很高的一种图形，它以折线的上升或下降来表示统计数量的增减变化趋势的统计图，最适用于时间序列的数据。与条形图相比，折线图不仅可以表示数量的多少，而且可以直观地反映同一事物随时间序列发展变化的趋势 标准折线图 堆积折线图19堆积折线图标准折线图使用说明：基于排序的维度元素或时间（日期，年）显示趋势；当有许多数据点且顺序很重要时比较有用。对折线图添加最大值、最小值、平均值等参考字段，可同时显示某一维度的数据的分布和趋势。 数据类型：时间序列 单维

24、度/单指标 折线图标准折线图堆积折线图标准面积图堆积面积图使用说明：瀑布图是数据可视化分析中常见的一种图形，对于一系列具有累计性质的正值/负值具有很好的展示功能，既可以帮助理解数据大小，又能直观的展示出数据的增减变化，反映数据在不同时期或受不同因素的影响结果。 数据类型：单维度/多指标（收入、支出、利润） Q/CSG 1210001.1-2013标准面积图堆积面积图3. 饼 图饼图在数据分析中无处不在，通过饼图可直观展示数据的构成比例信息。20堆积面积图使用说明：基于维度元素或时间显示每一个值的贡献度趋势；在基于某一维度强调值系列在总体中的趋势时使用 数据类型：时间序列 单维度/多指标 标准面

25、积图使用说明：基于维度元素或时间显示趋势 数据类型：时间序列 单维度/单指标 使用说明：基于排序的维度元素或时间显示每一个值的贡 献度趋势；可以考虑使用堆积面积图做为替代 数据类型：时间序列 单维度/多指标 Q/CSG 1210001.1-2013标准饼图标准环形图21标准环形图使用说明：显示每一个值在总体中的贡献度；当值可以加和或者当只有一个数据系列且所有值为正值时使用。饼的环形切块表示维度的各元素；切块的大小表示指标的值大小和在整个环形中所占的百分比。 数据类型：度/单指标 标准饼图使用说明：显示每一个值在总体中的贡献度；当值可以加和或者当只有一个数据系列且所有值为正值时使用。饼的扇形切块

26、表示维度的各元素；切块的大小表示指标的值大小和在整个饼中所占的百分比。 数据类型：度/单指标 饼图标准饼图标准环形图复合饼图南丁格尔玫瑰图 Q/CSG 1210001.1-2013复合饼图南丁格尔玫瑰图4. 散点气泡图散点图22散点图散点气泡图散点图气泡图南丁格尔玫瑰图使用说明：一种原形的直方图，扇形的角度和面积分别代表 2 个变量。 数据类型：单维度/2 个指标 复合饼图使用说明：从主饼图抽取部分值组合成辅饼图显示；当需 要使很小的百分比可读以及强调一组值时使用；或者分解维度包含层级关系，需要点击其中一个维度进行具体展开 数据类型：单维度（多层级）/单指标 Q/CSG 1210001.1-2

27、013气泡图5. 雷达图雷达图又称蜘蛛网图，将度数据在一个同心圆上进展对比展示，实现对分析对象 的全局性、整体性评价。雷达图分析法是综合评价中常用的一种方法，比较常用的是从企业的生产性、安全性、收益性、成长性和流动性等五个方面，对企业财务状态和经营现状进行直观、形象的综合分析与评价的图形。23气泡图使用说明：气泡图善于展示高维数据，可通过大小、位置、颜色等对比展示各类数据信息。气泡的密度代表数据的维度丰富程度，气泡的大小代表数据的大小，气泡的颜色代 表数据的状态；气泡之间位置可以表示数据之间的关系， 如示例 2 所示，气泡大小代表停电时长，气泡间的连线表示各个线路的关联关系，气泡的不同颜色代表

28、不同的地区 数据类型：高维数据 使用说明：散点图是一种常用的表现两个变量或多个变量之间相关关系的的可视化展现方式，可以在相关性或者拟合回归之前帮助理解变量之间的关系，辅助看出两个变量之间的相关关系类型和相关强度。散点矩阵图主要用于展示数据之间的分布关系，经常用于聚类结果的展示。将数据集中每条记录映射成二维或三维坐标系中的图形实体来构成散点图，所有散点图依次排列，构成散点图矩阵；通过图形展示，将偏离分布的点直观抽象出来，定位异常点；可通过形状、大小、颜色等度展示多个变量信息。 数据类型：多变量、明细数据 Q/CSG 1210001.1-2013标准雷达图填充雷达图6. 地 图地图可视化方法能够通

29、过对真实地理空间呈现更直观的可视化效果，来支持以地理空 间属性为主的数据分析。针对不同的数据属性，主要分为以下四种方法，分别适用于不同的分析场景。24填充雷达图使用说明：基于中心点显示相关数据，当元素值不能直接进行比较时使用。具体使用要求如下：显示元素个数在 3-10 之间较好；维度元素个数为向外的分支数；每种颜色的线或面表示一个指标系列；通过连线的面积可以查看多指标综合数据情况 数据类型：指标类数据、度数据 标准雷达图使用说明：基于中心点显示相关数据，当元素值不能直接进行比较时使用。具体使用要求如下：显示元素个数在 3-10 之间较好；维度元素个数为向外的分支数；每种颜色的线或面表示一个指标

30、系列；通过连线的面积可以查看多指标综合数据情况 数据类型：指标类数据、度数据 雷达图标准雷达图填充雷达图 Q/CSG 1210001.1-2013点分布地图线分布地图区域分布地图25区域分布地图线分布地图使用说明：适用于分析坐标离散点之间的关系以及关系分布度；少量、拥有距离/长度属性的数据适用该方法，可以展示每一条线性情况；可通过增加标签，颜色等视觉方式表达更多属性 数据类型：经纬度属性的数据；具有距离/长度属性 点分布地图使用说明：将对象根据它的坐标直接标识在地图上， 主要用于分析数据在地理空间的属性分布趋势，集中度、离散度等。也可增加一些属性分析不同坐标数据的差异化表现。适用于分析大量点数

31、据在地理空间的分布情况，查看集中度和离散度，但不对点与点之间做差异化分析 数据类型：地图空间（包含经度维度）中离散的点，点不含大小标尺等属性；数据量较大 地图点分布地图线分布地图区域分布地图组合地图 Q/CSG 1210001.1-2013组合地图7. 仪表盘仪表盘通常用来指标监控和分析，通过指针和色块来表示指标完成值和完成状态。26组合地图使用说明：第一种组合方式：适合分析不同地理空间的数据分布与差异情况，但同时需进行多属性、多层次钻取、横向关联的深度分析；该组合可视化是根据不同分析需求，将地图可视化的点分布可视化功能、线段可视化功能、区域可视化功在同一图表中进行多种方式的组合，包括两两组合

32、，或者三种结合，旨在支撑不同地理空间数据多属性、多层次的分析。第二种组合方式：可将地图可视化功能 与其他可视化方法进行组合，支撑横线关联，纵向钻取，时空结合的深度分析 数据类型：经纬度属性的数据；可以具有离散的点、距离/长度、区域的组合属性。 使用说明：适合分析区域的不同属性，比如区域人口密度/收入等，以及属性间的关联关系；适合分 析区域的不同属性，比如区域人口密度/收入等， 最常用的可视化方法就是采用颜色表示属性的值； 当数据的值域范围较大或数据类型较为多样的情况下，选择进阶的颜色映射为可视化的核心 数据类型：经纬度属性的数据；具有区域属性 Q/CSG 1210001.1-2013仪表盘标尺

33、27标尺使用说明：以横向或纵向标尺的形式来展现指标数据告警情况。通过色块来展示预警阈值范围，指针来表示指标实际值。 数据类型：实时更新变换数据；单一数据；数据取值范围不宜过大。 仪表盘使用说明：仪表数据区域是显示数据集中的单个值的一 维数据区域。各仪表始终位于仪表面板内，您可以在仪表面板内添加子仪表或相邻仪表。可以使用仪表面板在单个仪表面板内创建多个共享公用功能（如筛选、分组或排序）的多个仪表。适合需要根据实时数据不断更新的情况。适合需要配合相关数值提供直观显示的情况； 并实现预警阀值功能。 数据类型：实时更新变换数据；单一数据；数据取值范围不宜过大。 仪表盘仪表盘标尺数值刻度条红绿灯 Q/C

34、SG 1210001.1-2013数值刻度条红绿灯8. 统计图表现明细数据的分布情况和统计特征。28统计图直方图盒须图帕累托图红绿灯使用说明：红绿灯来表示指标状态，绿色表示状态正常；红色表示指标异动，需重点关注；黄色表示指标发生偏离，需引起关注 数据类型：指标的预警状态信息 数值刻度条使用说明：数值刻度条清洗直观的显示数据值具体值， 并结合颜色标记数据所属区间。适合需要同时显示一组相关数据的情况；适合需要清晰显示数据具体值的情况 数据类型：只能表示静态数据；只能表示同类数据，数据单位一致、且各数据应属于同一数量级范围内 Q/CSG 1210001.1-2013直方图盒须图帕累托图29盒须图使用

35、说明：帕累托图又叫排列图、主次图,是按照发 生频率大小顺序绘制的直方图，表示有多少结果是由已确认类型或范畴的原因所造成。它是将出现的质量问题和质量改进项目按照重要程度依次排列而采用的一种图表。 盒须图使用说明：“盒须图”又叫“箱线图”，用以显示数据的位置、分散程度、异常值等。箱线图主要包括六个统计量：下限、第一四分位数、中位数、第三四分 位数、上限和异常值。箱线图中异常值定义为上、下限之外的数据；箱线图适合分析数据的分散程度。 数据类型：明细数据。 直方图使用说明：直方图又称质量分布图。是一种统计报告图， 由一系列高度不等的纵向条纹或线段表示数据分布的情况。直方图是 QC 七大工具之一，通过绘

36、制直方图比较直观地看出产品质量特性的分布状态，对于质量分布状况一目了然，便于判断其总体质量分布情况；在正常生产条件下，如果所得到的直方图不是标准形状，或者虽是标准形状，但其分布范围不合理，就要分析其原因， 采取相应措施。一般用横轴表示数据类型，纵轴表示分布情况。 数据类型：产品质量数据、分类别数据等。 Q/CSG 1210001.1-20139. 大数据新型图表媒体流图和弦图30和弦图使用说明：擅长显性分析大规模数据之间的相关性， 可查看数据关系的分布规律，例如集中度、重要度、频繁度等。可通过图形属性的增加（网格图数据位置、关系方向性、节点颜色、大小、线条颜色、宽 媒体流图使用说明：对具有时间

37、和顺序属性的文本，可对其内容主题进行时序分析，同时可结合关键词展示，帮助用户理解文本主题;同时可分析文本的维护历史。 数据类型：跟随时间推移发生变化的文本内容, 时序性的文本内容。 大数据新型图表媒体流图和弦图空间层次图（Treemap）节点层次图文本可视化（标签云）离散时间分布图数据类型：明细数据，如灾害数据，项目明细，修理明细等。 Q/CSG 1210001.1-2013空间层次图（Treemap）节点层次图文本可视化（标签云）31节点层次图使用说明：擅长分析数据承接的层次关系，可依据应用需求不同增添不同的视觉元素属性。依据数据特点不同可用不同的表达方式， 可用圆锥形状表达，也可用圆状/环

38、状形状表达(如上图），若需要表达各层级数据的明细，建议增加标签的属性表现 （如左图），若只需要比较表达层级数量，以及各层级的数据量，建议增加颜色的属性表现。 数据类型：具有层次关系的数据，但不适合数目太多， 广度和深度相差太大的数据，该方法可读性较差 空间层次图（Treemap）使用说明：空间填充可视化方法擅长分析大规模层次结构的数据关系，也可通过不同的需求增添不同的视觉元素属性（颜色，大小，标签等）。适合分析数据之间的包含和从属关系，且适合处理大规模的层次结构，可以在有限的空间生成令人满意的可视化结果。树图是该可视化的典型方法，还允许用大小或者颜色来增添属性，以便用户直观的观察比重较大的节点

39、。但是树图采用空间层次嵌套的方式，导致视觉效果不如节点连接法直观。树图可以方形或圆形来展示。 数据类型：具有层次关系的数据，适合数目太多，广度和深度相差较大的数据，能较好反映包含和从属关系。 度）等增加表达属性 数据类型：不具备层次结构的、数据之间关系度密切、规模较大的数据。 Q/CSG 1210001.1-201332文本可视化（标签云）使用说明：简单、常用的关键词可视化技术，可对大量文本中不同的关键词的词频、重要性进行区别展示分析；利用颜色和字体大小反映关键词在文本 中分布的差异，可通过不同的布局方式产生不同的可视化效果。 数据类型：单个文档或网络文本。 Q/CSG 1210001.1-2

40、013离散时间分布图.2.实现方式实现图形图表包含以下两种方式：调用第三方图形组件和客制化开发图形组件。调用第三方组件是根据基础的图形图表需求，选择合适的第三方图形库，进行数据绑 定，生成展示组件。需遵循以下原则：支持 JavaScript（HTML 5）渲染；全面支持 AJAX；兼容主流常用脚本语言，如 ASP, PHP, ColdFusion, Perl 等；兼容主流的网络技术和数据库支持多种图表样式，支持单击、双击、悬停等鼠标交互支持多坐标轴；支持图形钻取；支持导出功能完整的使用文档，简单易用，扩展性强目前，市面上主要包括以下成熟的第三方图形库，可供选择：33FusionC

41、hartsAnyChartHighChartsEchartsGoogle ChartToolsSencha ExtJS Charts概要出色网络、移动应用程序 JS 图表 灵活的跨浏览器、跨平台JavaScript (HTML5) 图表控件 网络项目中的交 互式 JavaScript 站点实时数据显示 站点实时数据显示 免费插件图表(只有部分 extJS 框架) 离散时间分布图使用说明：离散时刻可视化一般用于分析具有时间跳跃点的数据在时间区间的表现情况，通常使用表格的形式展现，通过颜色的视觉属性表达数据规律。 数据类型：不具备时间连续性、在离散时间点有表现属性的数据类型。 Q/CSG 1210

42、001.1-2013针对新型的个性化展示需求，需采用客制化开发图形组件方式，通过代码定制开发新 型的图形图表，并封装成组件，便于后续开发调用。在客制化开发图形组件时，需遵循以下原则：遵循统一的界面标准和 UI 规范提供规范的参数接口和交互采用浏览器端开发技术，如 HTML5 canvas、VML、SVG，缓解服务器端压力。34首发时间2002 2003 2009 2013 2007 2011 图表展示应用SVG 和VML 的JS/HTML5 图表 Flash/HTML5 智能渲染 应 用 SVG 和 VML 的 JS/ HTML5 图表 应用Canvas 的HTML5 图表 应用 SVG 和V

43、ML 的HTML5 图表 应用SVG 和VML 的JS 图表 数据输入格式JSON 和XML XML JSON JSON JS API JS API 浏览器支持所有 wed、移动浏览器，包括 IE6 支持 Flash 或HTML5 的浏览器 所有 wed、移动浏览器，包括 IE6 支 持 HTML5 的浏览器 所有 wed 浏览器、移动浏览器，包括 IE6 所有web 浏览器，移动浏览器需要使用Sencha Touch 图表和地图类型90 多种 2D、3D 图表类型，950 种以上所有大洲、美国国家和地区、欧洲国家以及其他地区地图生成 60 多种图表 2D、 3D 图表，支持地图生成 25 类

44、以上 2D 地图，不支持 3D 图表 12 大类， 90 多种图表，支持地图生成 13 种2D 地图可作为GeoChart 使用 13 种 2D 地图，不支持3D 图表 源代码是否可供下载和修改是 否 是 是 是 是 授权有收费版，也有免费版 收费使用 非商用版使用免费 免费 免费 只能是部分Sencha Touch 捆绑包或者Sencha 完整包使 用 帮助文档1500 多页的帮助文档，包含新手指南，详细的 API 参考，综合示例，高级功能辅导性解释 新手指南，详细的 API 参考，简单例子 新手指南，详细的 API 参考，简单例子 新 手 指 南，详细的 API 参考，简单例子 新手指南，

45、 详细的 API 参考，简单例子 新手指南， API 参考 Q/CSG 1210001.1-2013交互.交互是用户通过与系统之间的对话和互动来操纵和理解数据的过程，可以辅助拓展表达空间，让用户更好的理解数据和探索数据。交互对于可视化应用构建来说至关重要，在进行交互设计时，需遵守以下原则：交互延时：是决定交互有效性最重要的因素，在很大程度上决定了可视化系统的 可用性及用户体验。交互成本：自动分析和交互分析应相互补充，权衡作用与成本，节约用户分析数 据的时间和精力交互场景变化：交互操作引发的场景变化应尽可能通过增加辅助手段避免过多增 加用户认知的负担具体来说，可视化交互包括 9 种

46、交互方式，通过以下 5 种技术手段来实现： 交互方式选择标出感兴趣的数据对象重配展示不同的可视化配置预警展示不同的视觉表现特效聚焦数据呈现的动作效果过滤根据条件展示部分数据导航展示不一样的信息值域漫游呈现所关心的数据区域多图联动图形之间的关联关系上下文查看数据细节 技术实现方式设计要求.1.在交互效果的设计过程中，需遵循以下要求：1， 选择35选择动画效果 窗口弹出 页面跳转 多图传参联 动 图表自带交 互功能 图形间交互图形内交互 Q/CSG 1210001.1-20132， 导航3， 重配36重配示例说明：通过更换坐标轴或者排序来实现图表动态类型的切换。 应用说明：重配旨在为

47、用户提供观察数据的不同视角， 常见的方式有重组视图、重排列等。通过视图重配，可更清晰、直观的展示数据特性，增强用户分析效率。 选择示例说明：通过缩放、平移、旋转来实现地图的漫游和导航。 应用说明：导航是通过调整视点位置、控制视图内容实现观察整个空间的有效手段，缩放、平移和旋转式导航中的三个 基本动作。 示例说明：中东地区敌友关系和弦图，鼠标滑过圆环中的国家， 高亮显示该国家与其他中东国家的关系。 应用说明：选择可以使用户在纷繁复杂的数据中标记其感兴趣的部分，并跟踪其变化情况。选择面临两类问题，如何选中和选中后显示的提示性信息。一般通过鼠标点击、双击或滑过来触发选择，显示提示信息。 Q/CSG

48、1210001.1-20134， 预警/高亮5， 值域漫游37值域漫游示例说明：左图展示一年的发展趋势，通过选择区间，可在主视图区域展示感兴趣的一段时 间的详细趋势。 应用说明：数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。 重配示例说明：将图中属于同一个地市的县公司高亮显示，直观展示该地市公司下所有县公司的低电压平均持续时长和台区数量的分布情况。 应用说亮显示数据对象间的联系，或者显示与特定数据对象有关的隐藏对象，在单视图或多视图中都有所使用，辅助用户同时观察数据的不同属性，或以不同的角度观察数据。或通过红绿黄色彩来显示指标的装填。 Q/CSG 121000

49、1.1-20136， 特效7， 过滤8， 多图联动9， 上下文38特效示例说明：通过在左图选择地市，传递地市参数到右图中，实现展示所选地市下属各县公司的相关信息分析。 应用说明：通过图形间的参数传递和数据 联动切换，进行指标分解分析和维度钻取，表达业务关联关系。 过滤示例说明：通过选择异动类型，动态查询底层数据，使柱图展示相应信息，呈现用户所关心的数据。 应用说明：过滤是指通过设置约束条件实现信息查询，通常采用动态查询的方式实现快速过滤和展现。 特效示例说明：百度迁徙数据的可视化炫光特效。 应用说明：通过 flash 技术、动画技术来增加可视化特效， 包括炫光特效、页面切换动画、数据交互动画等 Q/CSG 1210001.1-20.2.实现方式具体交互方式的实现是可以通过捕获的用户交互和数据变化实现图表间或者与 外界的联动。上述交互方式，通过以下技术来实现：图形图表本身的交互、多个图形图表之间的互动、页面的跳转、弹出窗口、动画效果。1， 图形图表本身的交互选择、导航、重配等交互方式通过一些高级图形组件自身提供的交互功能来实现。2， 多个图形图表之间的互动多个图形图表之间的互动，需要根据具体的设计需求开发展示组件，设计展示组件的 输入输出参数，并通