1

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

4

1 回答 1

1

要求我们推荐工具的问题可能会被视为离题，因此我建议您重新表述您的问题，要求提供工具列表，而不是要求推荐此类工具。即便如此，它也会引起争议。

不过，我觉得这个话题很有趣，因为你的问题没有任何问题（imo），我决定进行搜索以帮助你。这些是我的发现：

  • StackOverflow 相关问题。这个讨论有几个值得检查的工具：绘制半规/速度计（需要 JavaScript Canvas 或 Java Swing 示例）
  • 用户界面。不使用 JavaSctipt，而是使用 HTML5 和 CSS3，因此您必须了解您使用的浏览器（不同的浏览器支持不同的功能）但总体看起来像是一个有前途且轻量级的通用解决方案（对于最近的浏览器，而不是 IE8 之类的浏览器）或相关）：http ://www.uibox.in/item/68
  • 使用 JavaScript 和 HTML5 实现的速度计。有一个带有一些解释和支持的文档 wiki，但imo缺少代码示例：https ://github.com/vjt/canvas-speedometer
  • 在 codepen 中从头开始编码的车速表示例。无需额外评论 xD 尝试并享受！（我发布了一个我喜欢的例子）

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

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>

希望这可以帮助 ！！

于 2016-04-22T13:13:10.943 回答