javascript - 在条形图中显示多维数组(在 JavaScript 中)?

标签 javascript multidimensional-array visualization bar-chart

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

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

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

谢谢

最佳答案

查看FlotMilkChart 。前者延伸jQuery ,后者MooTools 。两者都使用 canvas元素,现在所有主要浏览器都支持该元素(甚至包括额外脚本的 IE)。看看reputation在您的 stackoverflow 配置文件中查看它的使用情况。我之前在项目中使用过 Flot(没有尝试过 MilkChart),虽然将数据传递到其中的方式一开始看起来有点不直观,但您会发现它对于非 Flash 图表解决方案来说实际上非常强大。 Flot 还定义了可用于定义图表交互的自定义​​事件。 Flot 通过插件支持堆积条形图,我相信您也可以用它来做簇状条形图。

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

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

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

编辑:

另一个我忘记提及的库是 PlotKit延伸MochiKit 。我没有使用过它,但显然它不仅支持使用 canvas 元素绘制图表,还支持使用 SVG 绘制图表。 。除了使用 HTML 破解解决方案之外,可扩展矢量图形为您提供了另一种声明性图形选项,但我不确定基于 SVG 的解决方案的跨浏览器性能如何(特别是在 IE 中)。

编辑:

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

关于javascript - 在条形图中显示多维数组(在 JavaScript 中)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1701260/

相关文章:

javascript - Google Charts 不接受格式正确的数组作为行数据

javascript - 自动平移谷歌地图

javascript - 如何展平夹紧的阵列

javascript - Observable.switchMap 不起作用并且没有任何错误

javascript - javascript中字符串中每个特殊字符前添加一个字符

php - 从二维数组 PHP 中删除某些索引

java - 查找二维数组中 1 最多的索引和列

python - 在python中绘制具有相同标签和颜色的序列

javascript - dc.js/如何在持续时间后自动更改条形图选定的值?

if-statement - Tableau - 返回具有 MAX 值的维度