有可能像这样制造速度表吗？

Question

是否可以使用任何jquery库创建这样的速度表。 ，像c3.js或canvas.js或任何library.if是的，任何人都可以提出创建它的想法。任何人都可以帮助我

Answer 1

要求我们推荐工具的问题可以被视为偏离主题，因此我建议您重新提出问题，要求提供工具列表，而不是要求提供此类工具的推荐。即使这样，它也会引起争议。

尽管如此，我发现这个主题很有趣，因为你的问题没有任何问题（imo）我决定进行搜索以帮助你。这些是我的发现：

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

http://codepen.io/tag/speedometer/

＆＃13;

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助!!