Кто знает хорошие примеры pie chart с градиентом?

Question

[costagolub]

Нужны примеры pie chart с градиентом, может кто видел на каких-то сайтах красивые pie charts? Сам где-то видел пару раз, но не могу вспомнить где именно.
Хотелось бы посмотреть, как они работают и заглянуть в код.
Также интересно, кто что посоветует насчет библиотеки для написания, какую лучше для такой цели?
В данный момент склоняюсь к написанию на canvas без использования библиотек, но если есть готовая библиотека с возможностью написать подобное - будет лучше.

Нужно сделать что-то по типу такого

Но с градиентной заливкой, к примеру, как на рисунке

Answer 1

[Николай]

На d3.js пай чарт делается строчек в 25. Плюс в том, что всё на svg, никаких канвасов и прочего непотребства.
zeroviscosity.com/d3-js-step-by-step/step-1-a-basi... статья, как сделать базовый график. По ходу статьи вполне очевидно, как можно приукрасить/изменить форму/цвета.

Comments

[costagolub]

Единственное, что вызывает проблему - градиент.

[Николай]

costagolub: в чём проблема? там же можно задать цвета для каждого деления.

[costagolub]

Да, можно пойти по такому пути и разбить на сотни сегментов, чтобы сделать что-то похожее, но это не тривиальная задача для svg и d3js такое не предусмотрено. Но в целом согласен, походу это один из немногих вариантов.
Было интересно, есть ли готовые библиотеки, которые могут предоставить такой график с градиентной заливкой.

[Николай]

а в чём смысл градиентной заливки то? Вы же понимаете, что цвета нужны чтобы разные сегменты друг от друга отличались визуально?

[costagolub]

Да, конечно, разделение подразумевается отступами между ними, как на первом скриншоте. Градиент должен плавно перетекать в каждую секцию, при этом отделенную отступом.

[Николай]

costagolub: вы сами понимаете, что хотите сделать? Если секция на 50% - какого цвета она должна быть?

[costagolub]

Николай: Я знаю, что нужно сделать и постарался предельно ясно описать в описании вопроса, как должно все выглядеть. У меня есть дизайн, поставленная задача и я не обсуждаю здесь другие варианты, а спросил по существу.
50% заливки градиентного фона, который я приложил.

Итог таков: с помощью SVG такой тип градиента сделать нельзя, только radial и linear. Решения есть два:
- разбить на сотни секций по радиусу и заливать каждую цветом, имитируя градиент.
- использовать встроенную возможность svg с linear градиентом и изменять направление заливки в зависимости от процентного соотношения (подходит если используется не более 2х частей в графике)

[costagolub]

В итоге я выбрал d3js