2014-09-04 32 views
2

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

图表应至少有这2个特征:

  • 变焦+通过放大图表平移点
  • 鼠标悬停显示摘要数据

所需图表类型:

  • 折线图
  • 酒吧/立柱图表
  • 饼图
  • 区域图表(不是必须的)
  • 气泡图(不是必须的)的图表类型
  • 和组合:
    • 柱形图+线图表
    • 面积图+折线图(不是必需的)
    • 气泡图+饼图(没必要)

支持的浏览器:

的Chrome,Firefox,歌剧,Safari浏览器(不是必要的)
  • IE 7+
  • 可能的解决方案的

    • 现代版本我心目中:

      • 服务器端图表图像生成:此解决方案是性能良好,但不提供足够的图表功能。
      • 基于Javascript的图表:这个解决方案有这么多的库,但其中大多数不提供足够的性能(据我所知,从我的研究)。的事情,我发现:
        • canvasjs
        • dygraphs
        • 谷歌图表
        • highcharts
        • amcharts
        • jqchart
        • d3js
      • 生成服务器上的图像,利用操作它javascript:T他的解决方案可能会这样做,但我找不到像这样工作的任何库。如果我们决定开发这个,我不知道花费多少时间。

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

      我应该选择哪个方向?

    +0

    你能想到一个既是服务器端又是客户端的解决方案吗?理由是仅用需要的数据加载客户端。根据需要通过ajax加载剩余的数据。 – deostroll 2014-09-04 12:48:06

    +0

    @deostroll,如果我找不到任何解决方案,我可能会开发一个既是服务器端又是客户端的解决方案。但缩放+平移功能将是一个挣扎... – 2014-09-04 13:06:07

    +1

    缩放和平移需要特定的API。它们可能是json Web服务或返回所需数据以生成图表的终点。此外,您可以使用拥有像SignalR这样的WebSocket概念的库。当然,请记住,您的应用程序需要以特定方式进行设计。 – deostroll 2014-09-04 13:26:51

    回答

    1

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

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

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

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

    +0

    实际上,我们不需要任何三维可视化,而这些库没有图表功能。不过谢谢你的答案。 – 2014-09-04 12:59:47

    +0

    我特别提到了Famou.us的表现。我不确定是否已经有任何图表库。我在某处有几个书签,我会检查它们,看看我能否找到一些有趣的东西 – AhmadAssaf 2014-09-04 13:02:57

    +0

    谢谢,我会等待您的评论。 – 2014-09-04 13:30:30

    0

    我的建议是jqchart或d3js。你提到的图表库只是流行的。 之前选择一个库,请使用下列标准检查

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

    根据您的需要选择。

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

    6

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

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

    但是即使像D3这样的强大选项渲染这样一个大型的数据集,你肯定会遇到一些问题。

    如果您的目标是提供交互式网络图表,您的首要考虑应该是您的数据采样位置。你将不得不抽样:监视器不能显示10亿个单独的数据点。另外,从服务器向客户端传输10亿个数据点需要大量的数据传输时间。

    那么,你离开了哪里?我在列表中没有看到的一个JavaScript图表库是ZingChart,它将满足所有这些要求。我们已经处理过类似大小的数据集,当然可以提供关于采样的建议。其中一个只是针对性能和其他准确性。

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

    为了解决在浏览器中渲染的问题,ZingChart提供了SVG,HTML5 Canvas和VML选项。对SVG和Canvas都有好处,但对于这个尺寸的数据集,Canvas提供了一些好处(尤其是如果您需要使用大型数据集的渲染条形图)。该库是建立在挫败感的基础上,与其他具有大型数据集的产品共同构建的,它能够在客户端上呈现数十万个节点(无需采样)。

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

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

    我在ZingChart团队,所以如果您对我们的答案与您现在称重的可能解决方案之间的关系有任何疑问,请随时与我们联系。