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