Как сделать такой график?

Question

[JackShcherbakov]

Здравствуйте!

Пытался сделать этот график на canvas но столкнулся с проблемой отлавливания событий мыши на холсте. При наведении на точку нужно отображать дату, к которой эта точка относится:



Как правильно сделать такой график без всяких костылей?

Заранее выражаю огромную благодарность всем, кто поможет!

Comments

[Interface]

Так а что у вас не получается? Выложите свои наработки хотя бы. Кажется, на фоне остальной работы вывод даты не кажется сильно сложным

[JackShcherbakov]

Interface, я начал делать https://codepen.io/CitizenOne/pen/xNMbzE Но я вообще не могу понять как грамотно сделать отображение даты

[Interface]

JackShcherbakov, эм.. ну все что вам надо сделать, это:
Рисовать кружочек и черточку другим цветом, а также вывести прмоугольник с закругленными краями и текст внутри него. На фоне задачи в целом, это выглядит +/- просто. что именно у вас вызывает вопросы?

[JackShcherbakov]

Interface, Уже ничего. Делать через CANVAS это дико неудобно. Нашел цитату в интернете:

«HTML5 Canvas тоже можно использовать для создания визуализации, однако генерируемый контент не является частью DOM и к нему нельзя получить доступ. Для решения данной проблемы, вам бы пришлось дублировать контент между открывающим и закрывающим тегом canvas. Такое решение также обеспечивает фоллбэк для старых браузеров. Также придется связать фоллбэк контент с холстом, чтобы при взаимодействии элементы реагировали правильно. Так что в HTML5 Canvas нам потребуется продублировать весь контент [...] А в SVG вы сразу получаете семантичность и доступность вместе с интерактивностью на JS прямо из коробки.»

Я уже представляю, какими костылями придется делать отображение даты при наведении.

[Interface]

JackShcherbakov, ну так это вы начали делать его на канвасе) Если б я затевал такое, я бы делал на свг. Но в любом случае сделать подсказку не должно быть сильно сложно на фоне остальной работы.

Я уже представляю, какими костылями придется делать отображение даты при наведении.

о каких "костылях" речь-то?

[JackShcherbakov]

Interface,

ну так это вы начали делать его на канвасе)

Да, это была моя ошибка.

о каких "костылях" речь-то?

Ну нельзя на кружок, отрисованном внутри канваса навесить события. Я почитал как это сделать через костыли. Можно сделать прозрачный див над этим кружком и отлавливать события на нем. Это дикость и страшный костыль. Там костыли и похлеще есть, типа определения цвета пикселя канваса, с целью определения, наведен ли курсор на интересующий элемент. И это еще только цветочки.

Answer 1

[Андрей Hecc]

Воспользуйтесь готовыми библиотеками:
https://www.chartjs.org/ (Более простая)
https://d3js.org/ (Более сложная)

У вас достаточно простой график, нету смысла писать что-то специфичное для его реализации.
Ну разве что чисто для практики, но это уже совсем другая история)

Comments

[JackShcherbakov]

Спасибо за ответ. Но в ваших библиотеках графики выглядят по-другому. Мне нужно строго следовать дизайну

[Олег]

JackShcherbakov, чувак. тебе дело говорят. готовое решение. кастомизируй под сво дизайн, если не из гильдии тыжпрограммистов, которые тз подгоняют под копипаст

[JackShcherbakov]

Олег, я понимаю, что можно просто подогнать дизайн. Но я не представляю, как это сделать в случае canvas. Если был бы просто SVG или HTML, к которому через CSS можно менять, тогда проблема была бы уже давно решена. На сколько я понимаю, тут внешний вид надо будет менять через сам JS библиотеки, но могу ошибаться.

[Андрей Hecc]

JackShcherbakov, посмотрите документацию, того же chart.js там все подробно рассписано.
Настройка будет выглядеть примерно так:

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                ...
            },
        },
        colors: {
        ...
        }
    }
});