Можно ли создать такой спидометр?

Question

Можно ли создать такой спидометр с любой библиотекой jquery. Например, c3.js или canvas.js или любые другие библиотеки. Если да, может кто-нибудь дать идею его создания. Кто-нибудь может мне помочь, пожалуйста

Answer 1

Вопросы с просьбой рекомендовать инструменты можно рассматривать как не относящиеся к теме, поэтому я предлагаю перефразировать ваш вопрос, чтобы запросить список инструментов, вместо того, чтобы запрашивать рекомендации таких инструментов. Даже тогда это будет спорным.

Тем не менее, я нахожу эту тему интересной, и, поскольку в вашем вопросе нет ничего плохого (imo), я решил сделать поиск, чтобы помочь вам. Это были мои выводы:

• Stackru связанный вопрос. В этом обсуждении есть несколько инструментов, которые стоит отметить: Рисование полумаски / спидометра (необходим пример JavaScript Canvas или Java Swing)
• UiBox. Не использует JavaSctipt, вместо этого использует HTML5 и CSS3, поэтому вы должны знать о браузерах, которые вы используете (разные браузеры поддерживают разные функции), но в целом выглядит как многообещающее и легкое универсальное решение (для современных браузеров, а не для IE8 или связанные): http://www.uibox.in/item/68
• Спидометр реализован с использованием JavaScript и HTML5. Имеет вики документации с некоторыми пояснениями и поддержкой, но в imo отсутствуют примеры кода: https://github.com/vjt/canvas-speedometer
• Примеры спидометров, закодированные с нуля в коде. Никаких дополнительных комментариев не требуется 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>

Надеюсь это поможет!!