最快的javascript图表库,用于真正庞大的数据

时间:2014-09-04 12:37:23

标签: javascript asp.net performance charts

我需要开发一个ASP.NET Web应用程序(不是MVC),它显示使用海量数据源生成的图表(如图表的10亿条记录)。

图表至少应包含以下两项功能:

  • 缩放+平移缩放图表
  • mouseover显示积分的摘要数据

需要的图表类型:

  • 折线图
  • bar / column chart
  • 饼图
  • 面积图(不是必要的)
  • 气泡图(不是必要的)
  • 和图表类型的组合:
    • 柱形图+折线图
    • 面积图+折线图(不是必要的)
    • 气泡图+饼图(不是必要的)

支持的浏览器:

  • 现代版Chrome,Firefox,Opera,Safari(非必要)
  • IE 7 +

我想到的可能的解决方案:

  • 服务器端图表生成:此解决方案有利于提高性能,但无法提供足够的图表功能。
  • 基于Javascript的图表:这个解决方案有很多库,但大多数都没有提供足够的性能(据我所知,从我的研究中)。我找到的东西:
    • canvasjs
    • dygraphs
    • google charts
    • highcharts
    • amcharts
    • jqchart
    • d3js
  • 在服务器上生成图像,使用javascript操作它:这个解决方案可能会这样做但我找不到任何像这样工作的库。如果我们决定开发它,我不知道要花多少时间。

最重要的是图表生成和互联网浏览器的性能。用户体验是关键。

我应该选择哪个方向?

4 个答案:

答案 0 :(得分:6)

基于JavaScript的图表将满足您的功能要求。

虽然D3会生成所需的图表类型并执行缩放,平移和悬停效果,但您需要花费大量的构建时间来创建所有可能的用户交互。出于这个原因,“商店购买”选项可能更具成本效益。

但即使在渲染如此庞大的数据集时使用像D3这样的强大选项,你肯定会遇到一些问题。

如果您的目标是提供交互式网络图表,那么首先要考虑的是数据采样的位置。您将不得不进行采样:监视器无法显示10亿个单独的数据点。此外,将10亿个数据点从服务器传输到客户端将需要大量的数据传输加载时间。

那么你离开了哪里?我在列表中没有看到的一个JavaScript图表库是ZingChart,它将满足所有这些要求。我们已经使用类似大小的数据集,当然可以提出有关采样的建议。一个是简单地面向性能和另一个准确性。

  • 使用exact:false进行采样将是最快的选择。
  • 智能采样将评估节点之间的空间差异。如果连续节点间隔超过x个像素,则显示节点。这样可以确保不会删除数据中的异常值和异常。

为了解决在浏览器中渲染的问题,ZingChart提供了SVG,HTML5 Canvas和VML选项。 SVG和Canvas都有好处,但是对于这个大小的数据集,Canvas提供了几个好处(特别是如果你需要具有大型数据集的渲染条形图)。该库建立在与其他具有大型数据集的产品一起工作的挫折之中,它能够在客户端上呈现数十万个节点(无需采样)。

ZingChart还提供交互式功能,允许最终用户导航数据并进行可视化查询。 API非常强大,允许您以编程方式或响应用户事件来控制可视化的每个部分。

您可能对Node.js库特别感兴趣。这是一个服务器端图像生成库,它与ZingChart的Canvas客户端库的代码库非常相似。它包括我们的服务器端构建的图像映射功能,它提供了一定的交互性。此外,还有在服务器和客户端上提供相同图表的好处。在处理如此大的数据集时,这可以提供一些有趣的用户体验机会。

我是ZingChart团队的成员,如果您对我们的答案与您现在正在考虑的可能解决方案有何关联有任何疑问,请随时与我们联系。

答案 1 :(得分:2)

我分析了所有答案但没找到我需要的答案,并决定使用dygraphs

Dygraphs免费提供足够的性能和ui特有的功能。不支持饼图,但支持其他图表类型(或者可以使用plotter-plugin支持)。

答案 2 :(得分:0)

  • Three.js是一个轻量级的javascript库,用于创建3D可视化(使用WebGL,SVG,Canvas或其他渲染器)。
  • Famo.us是一个用3D创建网络应用的JavaScript渲染引擎 承诺在移动设备上平稳运行(60FPS)的用户界面 设备。

Famo.us声称通过避免DOM布局和重绘来解决HTML5性能问题,这是非常昂贵的计算。相反,Famo.us保留了一个扁平的DOM,并使用CSS3变换进行所有布局和定位。

答案 3 :(得分:0)

我的建议是jqchart或d3js。您提到的图表库仅受欢迎。 在选择图书馆之前,请检查以下标准

  • 浏览器支持(IE8 +)
  • 移动设备支持
  • 图片转换
  • 明确产品文档(最重要的
  • 支持库的可用性
  • 库支持样式或功能的自定义

根据您的需求进行选择。

我之前尝试过使用highcharts,jqchart,jqplot,amchart,d3js。