如果你想要一个简单的基于 JavaScript 画布的仪表，你可以使用我自己创建的一个小库。它易于使用，并具有 wyswig 配置器，可轻松定制仪表。我已将其推送到 GitHub 上的http://bernii.github.com/gauge.js

您可以获得的一些预览：

我建议查看Raphael Javascript 图形库。它适用于所有浏览器（包括旧版本的 IE！），并使用矢量图形，因此它生成的图形可缩放和旋转而不会损失图像质量，甚至包括动画功能。

这是一个使用 Raphael 制作一些非常漂亮的仪表的人的链接：http : //techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css

但是如果你想自己画画，使用 Raphael 应该不难：它能够绘制圆环和形状，并为它们设置动画。看起来像你的例子应该不难实现。

以下是我快速拼凑的一些代码作为示例：

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
  var gauge = Raphael('mydiv', 200, 100);
  var semicircle = gauge.circle(100, 100, 100).attr({"fill": "#FF0000"});
  var indicator = gauge.rect(0, 99, 100, 2);
  indicator.animate({rotation: "30 100 100"}, 1000, "<>");
</script>
....
<div id='mydiv'></div>

我已经测试了那个代码，它产生了一个工作拨号。它不像我上面链接的另一个例子那么漂亮，但它不使用任何外部图形，并且完全使用 Javascript 完成。唯一的外部依赖是 Raphael 库。

显然需要一些工作来改进它以使其适用于您的场景，但这对您来说应该是一个相当好的开始。

希望有帮助。

[编辑]

上述脚本适用于 Raphael v1.5。然而，Raphael v2 稍微改变了语法。

执行动画的行需要使用新transform语法而不是不推荐使用的rotate语法。所以编辑后的行将如下所示：

indicator.animate({transform: "r30,100,100"}, 1000, "<>");

其余代码与上面相同。

有关函数语法的更多信息，请参阅Raphael 手册transform。

这个仪表库看起来不错，运行良好

http://justgage.com/

你见过这个开源仪表组件吗？您可以使用大约 10 种不同的样式。

对于 Swing，请查看开源SteelSeries（由 Gerrit Grunwald 开发，别名 @hansolo）。它包含许多类型的漂亮仪表（和其他有趣的组件）。