Временная шкала на чистом JavaScript и Svg

Question

Я уже задавал похожий вопрос, но как оказалось мне нужно реализовать данный график на чистом js. С чего начать? Я в основном видел примеры для canvas, но как работать с svg не смог найти.

Answer 1

Вам нужно нарисовать некоторое количество прямоугольников и линий, все они описываются определенными тегами, в примере ниже элементы rect описывают прямоугольники, path - линии, а text - подписи. Все это собрано в одну большую строку, которая, собственно, и описывает svg изображение. Смотрите результирующий текст HTML, через отладчик.

let data = [...Array((Math.random()*100)|0)]
    .map(_ => Math.random());

let total = data.reduce((a,b)=>a+b);

let a = 0;
data = data.map(i => ({
  x: a,
  w: a+=i*100/total,
  c: Math.random()*360
}));

data = data.map(d => `<rect 
  fill=hsl(${d.c},55%,55%)
  y=10 
  height=30 
  x=${d.x} 
  width=${d.w}></rect>`);

let ticks = [...Array(5)]
.map((_,i)=>1+i)
.map(i=>`
  <text font-size="5" x=${i/6*100} y=5 text-anchor=middle>${i*4+':00'}</text>
  <path d='m${i/6*100},7v3' stroke=red></path> `);


document.body.innerHTML += `<svg width=300px height=200px viewbox="0 0 100 66">
 ${data+ticks}
</svg>`;

БЛОГ НА HUSL

Временная шкала на чистом JavaScript и Svg

Ответы (1 шт):