Цитата:
http://ionden.com/a/plugins/ion.rangeSlider/demo.html |
NeonMan,
набросок ... лучше к специлистам css
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
counter-reset: num 2000;
display: flex;
width: 500px;
}
[name="line"]{
display: none;
}
label:before{
counter-increment: num ;
content: counter(num);
display: block;
width: 100px;
height: 4px;
background-color: rgba(255, 0, 255, 1);
line-height: 30px;
}
[name="line"]:checked ~ label:before{
background-color: rgba(240, 248, 255, 1);
}
label:nth-of-type(5):before{
width: 0px;
}
[name="line"]:checked + label:after{
margin-top: -6px;
content:'';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 0, 255, 1);
}
</style>
</head>
<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1"></label>
<input name="line" type="radio" id="line2" ><label for="line2"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3"></label>
<input name="line" type="radio" id="line4" ><label for="line4"></label>
<input name="line" type="radio" id="line5" ><label for="line5"></label>
</div>
</body>
</html>
|
о класс, то что нужно! Если бы еще на графике двигались точки по кривой параллельно, может и такие плагины знаете? может Вам этот знаком? chartjs.org или аналог, но где можно двигать обекты ввиде точек скажем, по кривой
|
NeonMan, соедени с этим https://javascript.ru/forum/jquery/7...tml#post493225 и css trasition.))
|
|
NeonMan,
Line_Charts |
Спасибо! Сейчас всё гляну
|
Вообще мне нужно сделать вот такой график
https://yadi.sk/d/nCR6XKHu3ajoyS Если Вы такой раньше делали, то хорошо, если бы Вы указали на более конкретные библиотеки для него. У меня просто мало времени. Пара дней |
15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц
Из всего этого я выбрал chartJs там в API вроде есть события и анимация, но как привязывать объекты к графику и заставить их двигаться по графику, причем по клику внизу на разделы годов - это самое сложное |
Классная фишка через counter-reset: num 2000; задавать нумерацию годам, но там (в макете) года идут не по порядку, кое где перескакивают через 2-3 значения, можно как-то при таком способе прописать вручную года?
|
| Часовой пояс GMT +3, время: 17:30. |