Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 22
Поздравляю, вы изобрели SVG :-)
Я пользуюсь вот этой библиотекой: https://github.com/kottenator/jquery-circle-progress
Позволяет использовать картинку как «заливку», что довольно удобно.
Не рекламы ради, но можете посмотреть результат например тут:
https://sp-yuga.ru/s1313/
Позволяет использовать картинку как «заливку», что довольно удобно.
Не рекламы ради, но можете посмотреть результат например тут:
https://sp-yuga.ru/s1313/
Snap.svg — ещё одна замечательная библиотека для работы с SVG.
Пример анимированного индикатора (не мой).
Пример анимированного индикатора (не мой).
мне понадобилось отображать проценты в круглых графиках(?)
И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется)
Называется pie chart
Даже Pie / Donut chart (круговая / кольцевая диаграмма соответственно, если по-русски). Примеры (на d3.js): простая кольцевая диаграмма, множественная кольцевая диаграмма, библиотечка d3pie (для автора её функционал, наверное, излишен).
Нет, pie chart — это немного другое. То, что сделал автор, называется doughnut chart
Использовать звёздочку в качестве знака умножения в LaTeX — дурной тон.
Для защиты текста, от превращения в последовательность переменных используйте
$$\text{percentage}\cdot 3,6 - 90$$
$$\text{radian} = 2\cdot \pi \cdot \frac{\text{percentage}}{100}$$
Для защиты текста, от превращения в последовательность переменных используйте
\text{}
Хорошая статья! Спасибо!
Также в google charts можно получить донат из pie chart, используя свойство pieHole
Спасибо большое за статью.
Совсем недавно тоже решал вопрос с построением диаграмм. Только мне нужно было ее еще и сделать анимационной. Искал множество решений и через CSS и через библиотеки, но ни один вариант не понравился. В итоге создал свою диаграмму с возможностью настройки отображения диаграммы. Исходный код класса диаграммы и ссылка на демо. Буду признателен, если хабровчане прокомментируют мое решение. Спасибо большое!)
Совсем недавно тоже решал вопрос с построением диаграмм. Только мне нужно было ее еще и сделать анимационной. Искал множество решений и через CSS и через библиотеки, но ни один вариант не понравился. В итоге создал свою диаграмму с возможностью настройки отображения диаграммы. Исходный код класса диаграммы и ссылка на демо. Буду признателен, если хабровчане прокомментируют мое решение. Спасибо большое!)
выглядит не эстетично, нужно бы добиться плавных линий…
Наше руководство любит «спидометры». Пожалуй, переведу пару отчетов на Вашу разработку, может, понравится им новый вид.
Достаточно канвас очищать на каждом кадре
Простите, что пишу в эту ветку, так как aккаунт read only, у меня возник вопрос по функции ctx.arc(100,75,50,0,2*Math.PI). А состоит он вот в чем, как интерпертатор js понимает что 0,2 это число, не что «0» это один аргумент, а «2*Math.PI» это другой аргумент?
Делать 11 раз подряд вызов функции с одним и тем же аргументом — не самая лучшая практика.
$(dials[i])
Да, это называется donut charts.
В крайней своей задаче я использовал гугло графики. Есть еще аналоги например highcharts.
https://developers.google.com/chart/interactive/docs/gallery/piechart
Вот реальный скрин с продакшена:
В крайней своей задаче я использовал гугло графики. Есть еще аналоги например highcharts.
https://developers.google.com/chart/interactive/docs/gallery/piechart
Вот реальный скрин с продакшена:
На SVG и stroke-dasharray можно очень дёшево сделать подобный бублик: http://jsfiddle.net/subzey/68s4myzk/embedded/result%2Chtml%2Cjs/
В свое время столкнулся с подобной задачей, только вместо диаграмм были маркеры на карте для Leaflet с дополнительным функционалов вроде окрашивания в различные цвета в зависимости от состояния, индикации различных состояний на внешнем контуре в виде сегментов. Ввиду необходимости серьезной кастомизации под собственные цели отказался от использования готовых библиотек. Писал сам, встраивание, управление стилями, свойствами — обычным jQuery.
В первой итерации попробовал канвас — получился примерно такой же код, как приведен автором — те же смещения, углы поворота, постоянная отрисовка. На 4K+ объектов в итоге начали ощущаться серьезные лаги, явное замедление скорости работы. Особенно при изменении масштаба карты.
В итоге переделал с помощью SVG. Как результат:
— ощутимый прирост скорости рендеринга,
— втрое меньше кода,
— из чего вытекает отсутствие даже самой необходимости использования сторонних решений (весь код управления маркером + логика поведения без шаблонов умещается на одном экране),
— и самый весомый плюс — масштабируемость без потери качества. Более того, даже сам шаблон не потребовал создания путей и прочих элементов.
Для круглого маркера: подложка+слои по количеству отрисовываемых сегментов.
Так что с целью «поиграться» может и подойдет canvas, но гораздо проще и красивее задачу можно решить с помощью SVG графики.
В первой итерации попробовал канвас — получился примерно такой же код, как приведен автором — те же смещения, углы поворота, постоянная отрисовка. На 4K+ объектов в итоге начали ощущаться серьезные лаги, явное замедление скорости работы. Особенно при изменении масштаба карты.
В итоге переделал с помощью SVG. Как результат:
— ощутимый прирост скорости рендеринга,
— втрое меньше кода,
— из чего вытекает отсутствие даже самой необходимости использования сторонних решений (весь код управления маркером + логика поведения без шаблонов умещается на одном экране),
— и самый весомый плюс — масштабируемость без потери качества. Более того, даже сам шаблон не потребовал создания путей и прочих элементов.
Для круглого маркера: подложка+слои по количеству отрисовываемых сегментов.
Так что с целью «поиграться» может и подойдет canvas, но гораздо проще и красивее задачу можно решить с помощью SVG графики.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Круглый график на Canvas