我现在应该使用哪些基于HTML5画布的控件库？

Question

Google表明，基于HTML5的基于画布的通用库已经很少了。但是，我从“大型”控制开发人员（如Infragistics，Rad等）那里看不到高质量的编辑/图表控件。

有关我应该注意什么的任何建议？

Answer 1

首先，我认为你不会从大公司那里找到Javascript库的解决方案。使用Javascript的人不习惯为企业级js库支付高额费用;）。

我会给你一些可能性的概述：

1. Highcharts是一款开箱即用的解决方案。我在一个项目中使用它取得了巨大成功。它有大量的文档，并在GitHub上积极开发。它易于使用，非常适合（不要低估外观“功能”）并且是交互式的：您可以绑定/附加到触发元素的事件，如“悬停在栏上”或“点击一个点” 。对于一个商业使用的网站，它需要花费80美元（非商业用途是免费的）。
2. Ext JS 4。另一个开箱即用的解决方案是最近（2011年4月）发布的第四版流行的Javascript库Ext JS。这个版本现在支持无插件图表（即没有Flash，只有SVG和VML等原生技术，所以它可以跨浏览器工作。如果你习惯于桌面或企业功能，那么你通常不会在Windows，布局管理器，MVC，拖放，工具栏，菜单，表单等Javascript库中查找，这绝对适合您。查看示例here。
3. gRaphaël是另一个很棒的图书馆，并且是MIT许可证（免费用于商业用途！）。它看起来更像“Flash-y”，更适合开发人员/密集型。所以你必须自己编写很多代码（它不是像Highcharts这样的完整解决方案），但是如果你能够流利使用jQuery，那么你会感到宾至如归。:)它的优势在于能够编写任何你想要的东西，你可以用它来做很多动画，就像在jQuery中一样。图中的所有元素都是SVG节点，因此您可以将事件附加到每个节点，并执行一些强大的功能。这些演示值得一试。
4. Flot。就像alexn说的那样，你可以使用Flot，但我已经使用过一次并且不是很喜欢它。我不知道究竟是什么不适合我，这是一个主观的事情。我不是很喜欢它的外观，但那只是我。亲自看看吧。
5. 其他图书馆，例如RGraph或Zingchart。我没有使用任何这些，所以这纯粹来自我所看到的：它们看起来像是处于起步阶段/没有抛光。我希望他们能够改进，但无论如何都要看看他们并选择你的赢家。

但是你说你想要基于画布的控件。这是为什么？是因为canvas是沿HTML5销售的。请参阅，Highcharts和gRaphaël不基于画布，但我认为这是你想要的，所以无论如何我都把它们放进去了。 gRaphaël的工作方式是这样的（Highcharts在引擎盖下以相同的方式工作，但对开发人员来说是隐藏的）：gRaphaël为您提供了一个API（例如piechart()），然后创建了许多SVG元素（将它们视为＆lt;然后绘制; div> s但具有更复杂的形状和图形过滤器）。您还可以将事件处理程序设置为这些元素。但是由于IE不支持SVG（这是一个令人震惊的），库会转换这些API调用以创建用于IE的VML。

但帆布是不同的。本身没有“元素”，你只是绘制线条和形状，但你不能只使用事件处理程序绑定到它们的事件。所以对我来说，SVG更好（你应该看到一些SVG能够使用的图形滤镜，比如模糊），我认为这些库更加成熟。

但是不要相信我的话;）。检查出来，告诉我你的想法。

Answer 2

Flot

alt text http://people.iola.dk/olau/flot/flot-screenshot.png

这是一个很好的图表控件。 Flot实际上用于在Stack Overflow显示您的声誉。

Answer 3

谷歌图表怎么样？          http://code.google.com/apis/chart/ “Google图表工具功能强大，易于使用且免费。请尝试我们丰富的交互式图表和数据工具库。 入门 饼图 - 查看源 “

Answer 4

我在ZingChart小组。我们使用HTML5 Canvas，SVG和Flash（以及旧的IE后备的VML）呈现图表。

如果您有任何疑问，可以通过支持[at] zingchart.com与我们的团队联系，或者http://twitter.com/zingchart。

-Andrew