Бюджет 8к.
Нужно сделать до вечера воскресенья.
Это график-слайдер. То есть на графике есть одна точка / ползунок, которую можно двигать по графику. Сама геометрия графика при этом не меняется. Есть зона, с выделением цветом (sweet spot).
На скриншотах должно быть видно, что нужно.
Использовать только бесплатные для коммерческого использования библиотеки, D3, Chart.js или что-то еще на ваш выбор. Jquery можно.
Я бэкендер, если все пойдет хорошо, то будут и другие хорошие фронтовые задачи, так как мне не всегда хватает навыков в js / фронте.
График строится из этого json:
|
Код:
|
{
"discounts": {
"0": "50.22",
"0.05": "336.47",
"0.1": "457.0",
"0.15": "690.53",
"0.2": "1255.5",
"0.25": "1745.15",
"0.3": "1895.81",
"0.35": "2302.59",
"0.4": "2310.12",
"0.45": "2536.11",
"0.5": "2498.45",
"0.55": "2423.12",
"0.6": "2310.12",
"0.65": "2159.46",
"0.7": "1858.14",
"0.75": "1650.98",
"0.8": "1330.83",
"0.85": "1010.68",
"0.9": "690.53",
"0.95": "370.37"
},
"sweet_spot_discount": 0.45
} |
При перемещении слайдера должно срабатывать событие:
1) Выводить значение Y. Например слайдер переведен на позицию 0.95 (последняя точка) значит нужно сделать console.log(370.37)
2) Менять метку над слайдером на 370.37
Если что-то в описании непонятно, то дополню его. Можно писать мне сразу в тележку @white_rbbit