【问题标题】:Is JavaScript ready for visualizing large datasets?JavaScript 准备好可视化大型数据集了吗?
【发布时间】:2010-10-15 23:53:50
【问题描述】:

我们有一些数据(10-50 列,数十万行),我们通常在 Excel 中将其可视化为折线图或堆积条形图。
用户希望能够放大和缩小图表以深入了解各个样本,但这类操作确实让 Excel 陷入了困境。

我正在考虑将数据嵌入到 HTML 页面中,并使用内联 JavaScript 来处理浏览器中的可视化。图表将利用诸如 flotr JS 图表库之类的东西。

  1. 这是一个愚蠢的想法吗?
  2. 浏览器准备好承受这种负载了吗?
  3. 这是一个已解决的问题,我应该在问之前更彻底地搜索一下吗?

【问题讨论】:

  • Canvas、WebGL 和 HTML5 API - 是的!浏览器现在已经准备好了!

标签: javascript dom browser visualization flot


【解决方案1】:

Javascript 可能已经为它做好了准备,因为 javascript 本身已经变得非常快。根据我的经验,浏览器通常准备好处理非常大的 DOM 结构。至少您可以预期会花费大量时间来找出运行缓慢的原因。您还会发现许多“标准”javascript 库(想到原型/jquery)不适合处理“过大”的大型 DOM 结构。

准备好发现一个给定的操作在所有浏览器上运行缓慢,但最终在不同的浏览器上出现了 3-4 个不同的原因。这是基于使用中等超大 DOM 的经验。虽然肯定有可能,但要获得一个体面的结果需要花费相当多的工作量。

【讨论】:

  • Canvas、WebGL 和 HTML5 API - 是的!浏览器现在已经准备好了!
【解决方案2】:

我强烈推荐 Adam 的建议来执行一些基准测试和优化。我最近在使用 Flot 绘制大型数据集方面做了一些工作,但在使用 Internet Explorer 时的性能不太好(例如,在绘制图表时,整个浏览器在我的开发人员盒子上挂了大约 20 秒)。

Flot 使用 canvas 元素绘制图表,仅 Internet Explorer 9+ 支持该元素。 Flot 使用 ExplorerCanvas 库为旧版本的 Internet Explorer 提供支持。这个库使用VML,通过DOM操作VML元素来绘制图形。

使用Internet Explorer 8 script profiler,我发现渲染情节的大部分时间都用于调用本机insertAdjacentHTML method 来创建VML 元素。因为无法提高对本地方法的调用性能,我转而致力于减少绘制的数据点数量(进而减少在 DOM 中创建的 VML 元素)以获得可接受的性能。

如果您不需要或不关心对旧版本 Internet Explorer 的支持,那么您应该会发现 Flot/Flotr 非常有能力处理大型数据集。但是,如果您确实需要支持这些版本,请准备好在绘制大型数据集时遇到性能问题。

【讨论】:

  • 我发现如果我尝试让 Flot 渲染一个 10k 点的简单折线图,我的浏览器会崩溃,因此强烈建议使用它的缩放 + AJAX 功能。
【解决方案3】:

Javascript 准备好可视化大型数据集了吗?

是的 - 该语言可以在正确的环境中毫不费力地处理重要的记录集并对其进行操作、可视化等。语言本身很好。

这是个愚蠢的想法吗?

不,事实上,您几乎可以指望每台计算机都能运行这种强大的跨平台语言。

浏览器准备好承受这种负载了吗?

有些可能 - 取决于您实际执行的处理和操作。随着 Chrome 使用快速的 javascript 引擎,以及越来越多的人严重依赖它,引发了 javascript 速度之战。我认为这是一个完全有效的使用场景。

您需要为基准测试和优化做好准备,这意味着深入挖掘 JavaScript 的精髓。请公布您的结果,以便弥补不足。

-亚当

【讨论】:

    猜你喜欢
    • 2023-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-11
    • 2011-07-14
    • 2015-11-08
    相关资源
    最近更新 更多