是否可以像这样创建速度计？

Question

是否可以使用任何 jquery 库创建这样的速度计。，例如 c3.js 或 canvas.js 或任何 libraries.if 是的，任何人都可以提出创建它的想法。谁能帮帮我

Answer 1

要求我们推荐工具的问题可以被视为题外话，因此我建议您改写您的问题，要求提供工具列表，而不是要求推荐这样的工具。即便如此，它也会引起争议。

不过，我觉得这个话题很有趣，而且由于您的问题没有任何问题 (imo)，我决定进行搜索以帮助您解决问题。这些是我的发现：

Whosebug 相关问题。此讨论有几个值得检查的工具：Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)
Ui盒子。不使用 JavaSctipt，而是使用 HTML5 和 CSS3，所以你必须知道你使用的浏览器（不同的浏览器支持不同的功能）但总体看起来是一个有前途的轻量级通用解决方案（最近浏览器，不适用于 IE8 或相关的浏览器）：http://www.uibox.in/item/68
使用 JavaScript 和 HTML5 实现的速度计。有一个带有一些解释和支持的文档 wiki，但 imo 缺少代码示例：https://github.com/vjt/canvas-speedometer
在 codepen 中从头开始编写的速度计示例。无需其他评论 xD 尝试并享受吧！（我发布了一个我喜欢的例子）

var needle = $('needle');
var el = $('el');

var measureDeg = function() {
  // matrix-to-degree conversion from http://css-tricks.com/get-value-of-css-rotation-through-javascript/
  var st = window.getComputedStyle(needle, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
           st.getPropertyValue("-moz-transform") ||
           st.getPropertyValue("-ms-transform") ||
           st.getPropertyValue("-o-transform") ||
           st.getPropertyValue("transform") ||
           "fail...";

  var values = tr.split('(')[1];
      values = values.split(')')[0];
      values = values.split(',');
  var a = values[0];
  var b = values[1];
  var c = values[2];
  var d = values[3];

  var scale = Math.sqrt(a*a + b*b);

  // arc sin, convert from radians to degrees, round
  var sin = b/scale;
  var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  
  el.set('data-value', angle);
};

var periodicalID = measureDeg.periodical(10);

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);

body {
  background: #fff;
}

#el:before {
  background: #fbfbfb;
  border-radius: 200px 200px 0 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset;
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
}

#el {
  border-radius: 200px 200px 0 0;
  height: 100px;
  margin: 50px auto 0;
  overflow: hidden;
  position: relative;
  width: 200px;
}

#el:after {
  background: #fff;
  border-radius: 140px 140px 0 0;
  bottom: 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
  color: rgba(255, 80, 0, 0.7);
  content: attr(data-value);
  font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 3.5em;
  font-weight: 100;
  height: 70px;
  left: 30px;
  line-height: 95px;
  position: absolute;
  text-align: center;
  width: 140px;
  z-index: 3;
}

span {
  background: rgba(255, 80, 0, 0.7);
  border-radius: 4px;
  bottom: -4px;
  box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
  display: block;
  height: 8px;
  left: 10px;
  position: absolute;
  width: 90px;
  transform-origin: 100% 4px;
  transform: rotate(0deg);
  transition: all 1s;
}

#el:hover span {
  transform: rotate(180deg);
}

h1,
p,
strong {
  display: block;
  font-family: Lato;
  text-align: center;
}

h1 {
  margin-bottom: 0.4em;
}

p {
  margin-top: 0;
}

strong {
  color: #efefef;
  font-size: 2.5em;
}

<div id="el" data-value="0">
  <span id="needle"></span>
</div>
<strong>hover</strong>

<h1>speedometer experiment</h1>
<p>Have fun with this little speedometer experiment. <br>The javascript is only needed to update the text!</p>

希望对您有所帮助！！

是否可以像这样创建速度计？

Is it possible to create the speedometer like this?

jquery

graph

c3.js

meter