If you want a simple JavaScript canvas based gauge you can use a little lib that I've created myself. It is easy to use and has a wyswig configurator for easy gauge customization. I've pushed it to the GitHub at http://bernii.github.com/gauge.js
I recommend looking into the Raphael Javascript graphics library. It works in all browsers (including old versions of IE!), and uses vector graphics, so the graphics it produces are scalable and rotatable without loss of image quality, and it even includes animation features.
But if you want to draw your own, it shouldn't be hard to do using Raphael: It has the ability to draw cicles and shapes, and to animate them. Something that looks like your example shouldn't be hard to achieve.
Here's some code I've knocked together quickly as an example:
I've tested that code, and it produces a working dial. It's not as pretty as, say, the other example I linked above, but it doesn't use any external graphics, and it's done entirely using Javascript. The only external dependancy is the Raphael library.
It'll obviously need some work to improve it to make it usable for your scenario, but it should be a fairly good start for you.
Hope that helps.
[EDIT]
The above script works for Raphael v1.5. However, Raphael v2 changes the syntax slightly.
The line to do the animation needs to use the new transform syntax rather than the deprecated rotate syntax. So the edited line would look as follows:
For Swing, have a look at the open source SteelSeries (developed by Gerrit Grunwald, alias @hansolo). It contains many types of nice looking gauges (and other fun components).
发布评论
评论（5）
如果您想要一个简单的基于 JavaScript 画布的仪表，您可以使用我自己创建的一个小库。它易于使用，并具有 wyswig 配置器，可轻松定制仪表。我已将其推送到 GitHub http://bernii.github.com/gauge.js
预览一下您可以获得的内容：
If you want a simple JavaScript canvas based gauge you can use a little lib that I've created myself. It is easy to use and has a wyswig configurator for easy gauge customization. I've pushed it to the GitHub at http://bernii.github.com/gauge.js
A little preview of what you can get:
我建议查看 Raphael Javascript 图形库。它适用于所有浏览器（包括旧版本的 IE！），并使用矢量图形，因此它生成的图形可以缩放和旋转，而不会损失图像质量，甚至还包括动画功能。
这是一个使用 Raphael 制作一些非常漂亮的仪表的人的链接：
http://techoctave.com/c7 /posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
但是如果你想自己画画，使用 Raphael 应该不难：它有能力画画圆和形状，并为它们设置动画。看起来像你的例子的东西应该不难实现。
以下是我快速拼凑起来的一些代码作为示例：
我已经测试了该代码，它生成了一个工作表盘。它不像我上面链接的另一个示例那么漂亮，但它不使用任何外部图形，并且完全使用 Javascript 完成。唯一的外部依赖是 Raphael 库。
显然需要一些工作来改进它以使其可用于您的场景，但这对您来说应该是一个相当好的开始。
希望有帮助。
[编辑]
上面的脚本适用于 Raphael v1.5。然而，Raphael v2 稍微改变了语法。
执行动画的行需要使用新的
transform语法，而不是已弃用的rotate语法。因此，编辑后的行将如下所示：其余代码与上面相同。
有关
transformRaphael 手册 > 功能。I recommend looking into the Raphael Javascript graphics library. It works in all browsers (including old versions of IE!), and uses vector graphics, so the graphics it produces are scalable and rotatable without loss of image quality, and it even includes animation features.
Here's a link to a guy who's used Raphael to produce some very good-looking gauges:
http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
But if you want to draw your own, it shouldn't be hard to do using Raphael: It has the ability to draw cicles and shapes, and to animate them. Something that looks like your example shouldn't be hard to achieve.
Here's some code I've knocked together quickly as an example:
I've tested that code, and it produces a working dial. It's not as pretty as, say, the other example I linked above, but it doesn't use any external graphics, and it's done entirely using Javascript. The only external dependancy is the Raphael library.
It'll obviously need some work to improve it to make it usable for your scenario, but it should be a fairly good start for you.
Hope that helps.
[EDIT]
The above script works for Raphael v1.5. However, Raphael v2 changes the syntax slightly.
The line to do the animation needs to use the new
transformsyntax rather than the deprecatedrotatesyntax. So the edited line would look as follows:The rest of the code remains the same as above.
See the Raphael manual for more information on the syntax of the
transformfunction.这个仪表库看起来不错并且运行良好
http://justgage.com/
this gauge lib look's good and run well
http://justgage.com/
您见过这个开源仪表组件吗？您可以使用大约 10 种不同的样式。
Have you seen this Open Source Gauge Component? There are about 10 different styles you can use.
对于 Swing，请查看开源 SteelSeries （由 Gerrit Grunwald 开发，别名 @汉索洛）。它包含许多类型的漂亮仪表（以及其他有趣的组件）。
For Swing, have a look at the open source SteelSeries (developed by Gerrit Grunwald, alias @hansolo). It contains many types of nice looking gauges (and other fun components).