Web页面中的大规模数据折线图优化方法研究

摘要

在大数据时代，数据可视化在信息挖掘过程中具有极其重要的作用，其中对大规模数据的处理能力是最基础的能力。目前，当数据规模过大时，web页面中的可视化工具都不同程度地出现了一定的性能瓶颈，极大地影响了工作效率。
　　但目前的前端可视化优化手段还比较局限，例如减小文件体积、使用缓存、减少页面节点数量等传统的技术优化手段，对技术优化后带来的信息缺失问题仍没有明确的解决方案。
　　本文选择具有典型代表性和普遍意义的可视化展示工具折线图作为研究对象，提出了在大规模数据场景下的综合优化方案，达到了从性能表现和设计表达两个方面都有了较大提升的效果。
　　方案以D3为绘制基础，采用svg矢量图作为底层机制，保留了现代折线图较强的交互性。借鉴“瓦片地图”，采用分层聚合的方式减小浏览器实际渲染的数据规模，从而减轻浏览器的渲染压力。对由于聚合而损失的部分数据特征，在满足条件的情况下，分别使用特定的颜色、灰度和形状来进行表达，并用连线的宽度来暗示数据的缩放级别，表示该折线对应的数据量。
　　将优化方案应用在一个十万级别数据源的折线图实际优化过程中，其绘制结果证明了无论在性能优化还是表达优化方面，本文提出的综合优化方案都起到了有效的作用。

目录

声明

摘要

图目录

表目录

1．1 选题背景

1．1．1 数据可视化

1．1．2 信息图表

1．1．3 折线图

1．2 研究现状

1．2．1 web前端可视化工具

1．2．2 前端优化

1．3 研究的目的和意义

1．4 论文组织结构

第2章 相关技术及原理介绍

2．1 可缩放矢量图形(SVG)与画布(canvas)

2．2 浏览器渲染引擎

2．3 图表设计

2．4 大数定律、中心极限定理和正态分布

2．5 本章小结

第3章 大数据量折线图前端技术优化方法

3．1 大数据折线图基础渲染方案分析

3．1．1 D3和Echarts无数据点折线图绘制性能比较

3．1．2 D3和Echarts有数据点折线图绘制性能比较

3．1．3 两种渲染机制下的折线图绘制结果分析

3．2 折线图分段渲染方案

3．3 折线图数据分层聚合方案

3．3．1 聚合后的数据点规模上限

3．3．2 单位数值聚合方案

3．4 本章小结

第4章 大规模数据折线图设计优化方法

4．1 数据点的展示优化

4．1．1 关于点的视觉属性与数据特征关系的问卷调研

4．1．2 基于数据特征的数据点设计方案

4．1．3 特殊数据点应用场景

4．2 基于数据量的连线展示优化

4．2．1 连线设计

4．2．2 连线宽度与聚合层级的关系

4．4 本章小结

第5章 综合优化方案设计

5．1 综合优化流程

5．2 优化案例介绍

5．3 优化案例结果

5．3．1 案例结果对比

5．3．2 案例优化有效性分析

5．4 本章小结

第6章 总结与展望

参考文献

致谢