在条形图中显示多维数组（在 JavaScript 中）？

Question

有没有人可以指点一下如何以条形图的形式显示多维数组？

数组是多维的，每部分包含三个元素 - 元素由 HTML 表单确定。

因此，如果可以在标准 HTML 网站上以 Javascript 条形图的形式显示这种数组，我将不胜感激！

谢谢

Answer 1

查看Flot 和MilkChart。前者扩展jQuery，后者扩展MooTools。两者都使用canvas 元素，现在所有主要浏览器都支持该元素（即使是包含额外脚本的 IE）。查看 stackoverflow 配置文件中的 reputation 选项卡以查看它的使用情况。我之前在一个项目中使用过 Flot（没有尝试过 MilkChart），虽然你将数据传递给它的方式起初看起来有点不直观，但你会发现它对于非闪存图表解决方案实际上非常强大. Flot 还定义了可用于定义图表交互的自定义​​事件。 Flot 通过插件支持堆叠条形图，我相信您也可以使用它来制作集群条形图。

您始终可以使用某种声明性图形解决方案，将div 元素用作图表中的条形，但这在浏览器中并不像使用画布绘制图表那样简单或一致。

如果您对其中任何一种解决方案持怀疑态度，您可以将数据发送到服务以返回静态图像。 Google Charting API 支持分组条形图，或者您可以使用自己托管的某些服务。

我的建议是使用 HTML 画布的第一个解决方案，特别是利用 Flot，因为这是我最有经验并且可以保证的库。也许其他人有一些关于 MilkChart 的信息。

编辑：

我忘了提到的另一个库是PlotKit，它扩展了MochiKit。我没有使用它，但显然它不仅支持使用canvas 元素的图表，还支持使用SVG 的图表。 Scalable Vector Graphics 为您提供了除了使用 HTML 破解解决方案之外的另一种声明性图形选项，但是我不确定基于 SVG 的解决方案将如何跨浏览器（尤其是在 IE 中）。

编辑：

Here 是一个使用 div 元素绘制图表的 jQuery 插件。我个人不喜欢这个选项，因为我认为它比其他一些选项更复杂，更不容易配置。我觉得使用 HTML 元素创建复杂的声明性图形（虽然令人印象深刻）是一种被黑的解决方案，并且根据我的经验，在某些时候会导致问题。

Answer 2

根据文档，如果安装了 excanvas 扩展，Flot 和 MilkChart 都只能在 IE 中工作。

为了更好的便携性，我建议查看Google Visualization API，它使用起来非常简单，并且有许多不同的显示可能性。可视化呈现为 Flash 元素（交互式）或纯图像（静态）。