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

发布于 2024-08-10 00:58:10 字数 155 浏览 9 评论 0原文

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

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

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

谢谢

Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?

The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.

So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

烟酉 2024-08-17 00:58:10

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

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

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

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

编辑:

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

编辑:

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

Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.

You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.

If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.

My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.

EDIT:

Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).

EDIT:

Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.

温柔戏命师 2024-08-17 00:58:10

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

为了提高可移植性,我建议查看 Google Visualization API,它是使用起来非常简单,并且有许多不同的显示可能性。可视化呈现为 Flash 元素(交互式)或普通图像(静态)。

According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.

For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文