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



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

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

  • 缩放+平移缩放图表
  • 鼠标悬停显示点的摘要数据

所需图表类型:

  • 折线图
  • 条形图/柱状图
  • 饼图
  • 面积图(没有必要)
  • 气泡图(没有必要)
  • 以及图表类型的组合:
    • 柱状图+折线图
    • 面积图+折线图(没有必要)
    • 气泡图+饼图(没有必要)

支持的浏览器:

  • Chrome、Firefox、Opera、Safari的现代版本(没有必要)
  • IE 7+

我心目中可能的解决方案:

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

最高优先级是图表生成和互联网浏览器的性能用户体验是关键。

我应该选择哪个方向?

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

虽然D3将制作所需的图表类型并进行缩放、平移和悬停效果,但创建所有可能的用户交互需要大量的构建时间。因此,"商店购买"的选择可能更具成本效益。

但是,即使在渲染如此大的数据集时使用D3这样的健壮选项,您也肯定会遇到一些问题。

如果你的目标是提供交互式网络图表,你首先应该考虑的是你的数据在哪里采样。您必须采样:监视器无法显示10亿个单独的数据点。此外,将10亿个数据点从服务器传输到客户端将需要相当长的数据传输加载时间。

那你该怎么办?ZingChart是我在您的列表中没有看到的一个JavaScript图表库,它将满足所有这些要求。我们使用过类似大小的数据集,当然可以就采样提出建议。一个只是为了性能,另一个是为了准确性。

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

为了解决浏览器中渲染的问题,ZingChart提供了SVG、HTML5 Canvas和VML选项。SVG和Canvas都有好处,但对于这种大小的数据集,Canvas提供了几个好处(尤其是当您需要使用大型数据集渲染条形图时)。该库是出于对使用其他具有大型数据集的产品的不满而构建的,它能够在客户端上渲染数十万个节点(无需采样)。

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

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

我是ZingChart团队的成员,所以如果您对我们的答案与您目前正在权衡的可能解决方案有任何疑问,请随时联系。

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

Dygraph免费提供足够的性能和特定于ui的功能。不支持饼图,但支持其他图表类型(或可能使用绘图仪插件支持)。

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

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

根据您的需求进行选择。

我以前尝试过使用highcharts、jqchart、jqplot、amchart、d3js。

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

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

最新更新