我们有一些数据(10-50 列,数十万行),我们通常在 Excel 中将其可视化为折线图或堆积条形图。
用户希望能够放大和缩小图表以深入了解各个样本,但这些操作确实让 Excel 陷入了困境。
我正在考虑将数据嵌入到 HTML 页面中,使用内联 JavaScript 来处理浏览器中的可视化。类似 flotr JS 图表库之类的东西将被用于图表。
- 这是一个愚蠢的想法吗?
- 浏览器准备好承受这种负载了吗?
- 这是一个已解决的问题,我应该在问之前更彻底地搜索一下吗?
我们有一些数据(10-50 列,数十万行),我们通常在 Excel 中将其可视化为折线图或堆积条形图。
用户希望能够放大和缩小图表以深入了解各个样本,但这些操作确实让 Excel 陷入了困境。
我正在考虑将数据嵌入到 HTML 页面中,使用内联 JavaScript 来处理浏览器中的可视化。类似 flotr JS 图表库之类的东西将被用于图表。
Javascript 可能已经为它做好了准备,因为 javascript 本身已经变得非常快。根据我的经验,浏览器通常还没有准备好处理非常大的 DOM 结构。至少您可以预期会花费大量时间来找出运行缓慢的原因。您还会发现许多“标准”javascript 库(想到原型/jquery)不适合使用“过大”的大型 DOM 结构。
准备好发现一个给定的操作在所有浏览器上都很慢,但最终在不同的浏览器上会出现 3-4 个不同的原因。这是基于使用中等超大 DOM 的经验。虽然肯定有可能,但要获得体面的结果需要花费大量的工作。
我强烈推荐亚当的建议来执行一些基准测试和优化。我最近在使用 Flot 绘制大型数据集方面做了一些工作,并且在使用 Internet Explorer 时遇到了低于可接受的性能(例如,在绘制图表时,整个浏览器在我的开发人员框中挂了大约 20 秒)。
Flot 使用canvas
仅 Internet Explorer 9+ 支持的图表元素。Flot 使用ExplorerCanvas库为旧版本的 Internet Explorer 提供支持。该库使用VML,通过 DOM 操作 VML 元素来绘制图形。
使用Internet Explorer 8 脚本分析器,我发现渲染绘图所花费的大部分时间都用于调用本机insertAdjacentHTML 方法来创建 VML 元素。因为无法提高调用本机方法的性能,所以我转而致力于减少绘制的数据点的数量(进而减少在 DOM 中创建的 VML 元素)以获得可接受的性能。
如果您不需要或不关心对旧版本 Internet Explorer 的支持,那么您应该会发现 Flot/Flotr 非常有能力处理大型数据集。但是,如果您确实需要支持这些版本,请准备好在绘制大型数据集时遇到性能问题。
Javascript 准备好可视化大型数据集了吗?
是的 - 该语言已经到了可以毫不费力地在正确的环境中处理重要记录集并对其进行操作、可视化等的程度。语言本身很好。
这是一个愚蠢的想法吗?
不,事实上,您几乎可以指望每台计算机都能够运行这种强大的跨平台语言。
浏览器准备好承受这种负载了吗?
有些可能是 - 取决于您实际采取的处理和操作。随着 Chrome 使用快速的 javascript 引擎,以及越来越多的人严重依赖它,javascript 速度之战被点燃。我认为这是一个完全有效的使用场景。
您需要为基准测试和优化做好准备,这意味着深入了解 javascript。请公开您的结果,以便可以弥补不足。
-亚当