JavaScript 图表库

IT技术 javascript charts
2021-01-18 20:41:38

有人会推荐一个特定的 JavaScript 图表库 - 特别是一个根本不使用 Flash 的库吗?

6个回答

越来越多的不需要 Flash 的纯 JavaScript 图表的开源和商业解决方案。在此回复中,我将仅介绍开源选项。

对于不需要 Flash 的图形,有 2 类主要的 JavaScript 解决方案:

  • 基于画布,使用 ExplorerCanvas 在 IE 中呈现,而后者又依赖于 VML
  • 基于标准的浏览器上的 SVG,在 IE 中呈现为 VML

两种方法各有利弊,但对于图表库,我会推荐后者,因为它与 DOM 很好地集成,允许使用 DOM 操作图表元素,最重要的是设置 DOM 事件。相比之下,Canvas 图表库必须重新发明 DOM 轮来管理事件。因此,除非您打算构建没有事件处理的静态图,否则 SVG/VML 解决方案应该更好。

对于 SVG/VML 解决方案,有许多选项,包括:

Raphael是一个非常活跃、维护良好且成熟的开源图形库,具有非常好的跨浏览器支持,包括 IE 6 到 8、Firefox、Opera、Safari、Chrome 和 Konqueror。Raphael 不依赖于任何 JavaScript 框架,因此可以与 Prototype、jQuery、Dojo、Mootools 等一起使用......

有许多基于 Raphael 的图表库,包括(但不限于):

  • gRaphael,Raphael 图形库的扩展
  • Ico,具有基于单个函数调用的直观 API 来创建复杂图表

披露:我是github一个 Ico 分支的开发者

需要注意的是,Raphael 似乎已不再维护。最后一次提交是在 2010 年 7 月左右。
2021-03-20 20:41:38
@Alastair:Raphael 现在由 Sencha 赞助和开发......或者他们说:)
2021-04-03 20:41:38
刚刚下载了拉斐尔图表,很喜欢它但没有文档,只是为了预先警告。
2021-04-06 20:41:38
Honeycomb 之前的 Android 不支持 SVG。如果要求能够在当前广泛的 Android 设备上查看图表,则必须选择基于 Canvas 的解决方案。这篇关于 Sencha Touch Charts 的文章详细介绍了一般的移动图表,以及 Sencha Touch 走 Canvas 路线的原因。
2021-04-07 20:41:38
Grafico 和 Ico 是 Alex Young 最初的 Ico 的两个不兼容的分支。所以说 Ico 已经成为 Grafico 是不准确的。Grafico 只是其中一种。
2021-04-07 20:41:38

如果您使用 jQuery,我发现flot非常好 - 尝试这些示例,看看它们是否适合您的需求,但我发现它们可以完成我当前项目所需的大部分工作。

此外,ExtJS 4.0引入了一组很棒的图表 - 非常强大,旨在处理实时数据。

我对 flot 唯一真正的抱怨是,在 IE 中渲染时,它在 100% 以外的任何缩放级别下看起来都很糟糕(即所有线/块不能一起缩放 - 这对于我们这些拥有高分辨率显示器的人来说绝对是一个问题)。
2021-03-13 20:41:38
看起来流程图看起来比我看过的许多其他图表都要好看。这是 20 个 JavaScript 图表库的链接:javascript.open-libraries.com/utilities/chart/...
2021-03-15 20:41:38
我也喜欢 flot,以前在不同的网络应用程序上使用过很多次。
2021-03-21 20:41:38
这与 Geoff Dalgas 用于在 StackOverflow 上创建声誉图的库相同。它确实是一个不错的套件。
2021-04-01 20:41:38
我一般喜欢 flot 但它希望所有数据都是数字,所以如果你想绘制像每个客户(按名称)或每个产品的销售额之类的东西,它就行不通
2021-04-08 20:41:38

查看http://www.highcharts.com

Highcharts 是一个用纯 JavaScript 编写的图表库,提供了一种向您的网站或 Web 应用程序添加交互式图表的简单方法。Highcharts 目前支持折线、样条、面积、面积样条、柱形、条形、饼图和散点图类型。

Stackoverflow 本身使用 highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
2021-03-14 20:41:38
这与 CloudFlare.com 中使用的图表库相同,它看起来非常棒。当我偶然发现 highcharts 库时,我正准备使用 DevExpress 图表库,它是 ASP.NET 和服务器中的渲染和图像。我立刻确信这是要走的路。当我发现 CloudFlare(它拥有我见过的最引人注目的仪表板/分析之一)也使用它时,我被卖掉了!我目前正在试验它,它在我第一次尝试在我的网页中嵌入图表时奏效了……所以它似乎也很容易使用!
2021-03-22 20:41:38
起初它是一个无耻的插头,但它们看起来真的很棒!!虽然它不是免费用于商业用途,我没有参考价格是否合理,但它们一目了然!
2021-04-04 20:41:38
值得指出的是,这个库对于非商业用途是免费的,但单站点和多站点都要花钱。然而,这似乎是一个相当合理的价格。
2021-04-05 20:41:38
再给 Highchart 投一票。我目前正在使用它,它很棒。支持 jQuery、Mootools 和 Prototype,设置和使用非常简单。
2021-04-05 20:41:38

它可能不是您正在寻找的,但
Google 的 Chart API非常酷且易于使用。

我需要做一个水平型烛台,有人知道谷歌图表 api 是否可行?
2021-03-13 20:41:38
@user102008:现在是:)(如果您愿意,您仍然可以访问基于图像的 API
2021-03-22 20:41:38
请记住,Google Chart 需要互联网连接,并且对允许的客户端请求数量也有一些限制
2021-03-24 20:41:38
Google Chart API 不能离线使用,不利于移动开发。
2021-04-01 20:41:38

还有另一个基于 SVG 的 javascript 库。它被称为Protovis,它来自斯坦福可视化小组

它还允许制作漂亮的交互式图形和可视化。

http://vis.stanford.edu/protovis/ex/

虽然它仅适用于现代网络浏览器

更新: protovis 团队已转移到另一个名为 d3.js(数据驱动文档)的库,正如他们所说:

“Protovis 团队现在正在开发一个新的可视化库 D3.js,它改进了对动画和交互的支持。D3 建立在 Protovis 的许多概念之上”

现在可以在以下位置找到新库:

http://mbostock.github.com/d3/

更新 2:

“人力车”是一个用于创建交互式时间序列图的 JavaScript 工具包。基于 d3.js,它简化了 d3.js 的工作,尽管功能稍差。

http://code.shutterstock.com/rickshaw/

快速浏览一下,我认为 D3 不会“取代”Protovis。我会说团队“继续前进”,因为他们认为它更有趣和更前沿。
2021-03-26 20:41:38