Как они рисуют диаграммы / графики в stackoverflow?

Я потратил целую вечность на изучение VML и создание диаграмм для веб-сайта один раз, но, поскольку VML работает только в Internet Explorer, в наши дни это не очень хорошо.

Я заметил, что у stackoverflow есть графики на странице моего профиля в разделе «Репутация», но я не мог увидеть, как они это сделали.

Может ли кто-нибудь предложить способ создания клиентских диаграмм или диаграмм, которые работают во всех браузерах? Я не хочу использовать серверный метод, при котором файл изображения создается на лету. Возможно, я захочу также взаимодействовать с диаграммой с помощью JavaScript.

[Edit - я хочу рисовать не только диаграммы. Возможно, и маленькие диаграммы!]

Спасибо.


person Magnus Smith    schedule 12.11.2008    source источник


Ответы (4)


Flot превосходен.

person Galwegian    schedule 12.11.2008
comment
Я собирался предложить SVG, но выглядит потрясающе. - person John Ferguson; 12.11.2008
comment
Я считаю, что SVG требует, чтобы пользователи загрузили и установили плагин? - person Magnus Smith; 19.11.2008
comment
SVG изначально работает практически со всем, кроме IE, который вместо этого имеет VML. У Google есть уровень совместимости с JS, который они выпускают (не совсем уверен, что он еще выпущен), который имитирует SVG в IE с использованием VML - почти так же, как ExCanvas имитирует холст. Итак, да, вы можете использовать SVG сейчас, без плагина, и даже в IE, если вы чувствуете себя смелым. - person ijw; 26.08.2009

Для этой цели Google создал отличный общедоступный API диаграмм.

Примеры:

 линейная диаграмма  круговая диаграмма  alt text

person mkoeller    schedule 12.11.2008
comment
Отлично, мне нужно найти этому применение ;-). - person Toon Krijthe; 12.11.2008
comment
Я не думал, что вы сможете взаимодействовать с Google Charts после их рендеринга ..? - person Galwegian; 12.11.2008
comment
Я использовал их раньше - они великолепны! Но в вопросе я сказал, что хочу процесс на стороне клиента. - person Magnus Smith; 12.11.2008

В эпизоде ​​24 подкаста по переполнению стека упоминается, что используется jQuery. Комментатор этой статьи предполагает, что flot - это используемая библиотека.

person Chris Lowis    schedule 12.11.2008

Ознакомьтесь с Google Chart API. Вы можете делать самые сложные вещи с минимальными усилиями - вы во время разработки и сервер во время выполнения. Хороший.

person Daniel M    schedule 12.11.2008
comment
Я использовал их раньше - они великолепны! Но в вопросе я сказал, что хочу процесс на стороне клиента. - person Magnus Smith; 12.11.2008