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

Question

有人可以给我一些关于如何以条形图的形式显示多维数组的指示吗？

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

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

谢谢

Answer 1

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

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

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

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

编辑：

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

编辑：

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

Answer 2

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

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