Советы по созданию простой гистограммы, но с индивидуальным стилем

Question

У меня есть некоторые данные, которые отображаются на гистограмме с помощью Google Visualization API. Это было достаточно просто, пока дизайнеры не переработали его ... Теперь, похоже, что-то за пределами того, что Google может помочь мне.

Учитывая прилагаемый макет (и обратите внимание на более мелкие детали, такие как отражение и градиенты!) - как бы вы его построили? Используете некоторые существующие графические библиотеки? Доморощенный с нуля?

Спасибо за любой совет.

Answer 1

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

Хотя он не предоставляет простой API для подключения данных к диаграмме, он предоставляет возможность построить диаграмму со следующими параметрами:

• различные формы (то есть столбики)
• градиенты
• встроенные изображения (т.е. фон)

Answer 2

Конечно, вы можете использовать рекомендацию chuckx Rapheal, которая является библиотекой Javascript на основе SVG. Он может принимать значения JSON, так что, если у вас есть JSON из Google API, вы можете ввести его напрямую.

Вариант 2: HTML Canvas. Существует множество библиотек HTML 5 canvas, таких как Kinect, fabric.js мощных библиотек JavaScript JavaScript

Answer 3

Вы можете изменить визуальный эффект, используя CSS.