Как рисовать числовые линии, используя HTML

Question

У нас есть требование нарисовать числовую линию, очень похожую на то, что показано над здесь .Область действия следующая.

1. Рисование линий, как указано на приведенной выше странице (с диапазоном чисел)
2. Возможность запрашивать ввод данных пользователем (например, число в определенной точкеили число, которое находится до или после определенного числа)
3. Укажите разные цвета для линии / чисел

Какие существуют абстракции, которые помогут нам сделать этопо-простому?(холст html5, jquery, javascript или любой другой фреймворк, способный генерировать HTML-код)

Answer 1

Используя Canvas Element,

$(function() {
  var canvas = $('canvas')[0];
  var ctx = canvas.getContext('2d');

  var w = canvas.width = 700;
  var h = canvas.height = 400;
  with(ctx) {
    fillStyle = '#000';
    fillRect(0, 0, w, h);
    fill();
    beginPath();
    lineWidth = 2;
    strokeStyle = '#f00';
    moveTo(w/7, h/2);
    lineTo(6*w/7, h/2);
    stroke();
    for(var i = -10;i <= 10; i++) {
      beginPath();
      strokeStyle = '#0f0';
      lineWidth = 2;
      moveTo(w/2 + i * 20, h/2 - 20);
      lineTo(w/2 + i * 20, h/2 + 20);
      fillStyle = '#ff0';
      fillText(i, (w/2 + i * 20 )- 5, h/2 + 35);
      if(!i) {
        lineWidth = 4;
        strokeStyle = '#f0f';
      }
      fill();
      stroke();
    }
  }
});

см. В действии

Я думаю, вы можете добавить свой собственный модуль в соответствии с вашими требованиями:)

Answer 2

Я еще ничего не сделал с Raphael.js, но это выглядит чертовски круто.

http://dmitrybaranovskiy.github.io/raphael/