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

Question

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

图表至少应具有以下两个功能:

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

需要的图表类型:

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

支持的浏览器:

• 现代版Chrome,Firefox,Opera,Safari(不是必需的)
• IE 7+

我想到的可能解决方案:

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

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

我应该选择哪个方向？

Answer 1

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

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

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

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

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

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

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

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

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

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