绘制半表/速度表（需要JavaScript画布或Java Swing示例）

有人有javascript画布或java swing示例吗

大概是这样的：

我应该如何画“分隔线”？

你看到了吗？您可以使用大约10种不同的样式

---

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

这里有一个链接，链接到一个用拉斐尔制作了一些非常好看的仪表的人：

但是如果你想自己画，使用拉斐尔应该不难：它有能力画圆环和形状，并为它们制作动画。看起来像你的例子的东西应该不难实现

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

<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>

代码的其余部分与上面相同

---

有关

transform

函数语法的更多信息，请参阅。

如果您想要一个简单的基于JavaScript画布的量表，可以使用我自己创建的一个小库。它易于使用，并具有wyswig配置程序，便于仪表定制。我已经把它推到了GitHub上

您可以获得的一些预览：

---

对于Swing，请看一看开放源码（由Gerrit Grunwald开发，别名为@hansolo）。它包含许多类型的美观仪表（以及其他有趣的组件）。

此仪表库外观良好，运行良好

---

注意；具体来说，我创建了。使用你想要的任何图形。这些是闪光计，不是JavaScript或Java Swing…好吧，我想这取决于你使用它们的目的。我如何配置它为红色，同时达到最大值（如示例所示）。这在IE8中看起来明显（但可以接受）不稳定，特别是在高/低颜色相交的地方，针位于。。。在chrome 28和firefox 22中看起来很棒。定制这个插件非常容易。非常好，尽管在IE中几乎无法使用。@berni你有没有为Angular 2实现这个插件？

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