[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Подскажите хороший построитель диаграмм
Faantoom
Доброго времени суток, сейчас работаю над проектом, для которого требуется хороший построитель графиков и диаграмм. В интернете встречал много Javascript библиотек, предназначенных для этого, но выбрать из них оказалось проблематично =) Вот хочу узнать мнение профессионалов, какую библиотеку посоветуете использовать? Требуется построить круговую диаграмму, примерно такую как на прикрепленном рисунке.



Спустя 9 часов, 5 минут, 33 секунды (29.11.2010 - 09:24) Basili4 написал(а):
посмотри эту библиотеку http://raphaeljs.com/

Спустя 3 часа, 42 минуты, 21 секунда (29.11.2010 - 13:06) Faantoom написал(а):
Basili4, неплохо, спасибо.

Спустя 17 минут, 37 секунд (29.11.2010 - 13:24) sergeiss написал(а):
Вопрос... А почему именно JS, а не на ПХП?

Спустя 2 минуты, 7 секунд (29.11.2010 - 13:26) sharki написал(а):
sergeiss
А вот зацени один из примеров http://raphaeljs.com/ichart.html там все вопросы отпадут)

Спустя 2 минуты, 38 секунд (29.11.2010 - 13:29) sergeiss написал(а):
sharki - нет, все вопросы не отпадут smile.gif

И мне на самом деле интересно услышать ответ ТС на вопрос, который я уже задал. Почему именно в его задаче лучше делать графики на JS, а не на ПХП?

Спустя 58 секунд (29.11.2010 - 13:30) sharki написал(а):
sergeiss такую же динамическую? О_О

Спустя 2 минуты, 31 секунда (29.11.2010 - 13:32) sergeiss написал(а):
Насчет "такой же" я убрал уже smile.gif, до того, как ты ответ написал.

Спустя 17 минут, 25 секунд (29.11.2010 - 13:49) Slays написал(а):
канвас мудная штука =)

Спустя 45 минут, 45 секунд (29.11.2010 - 14:35) sergeiss написал(а):
Цитата (sharki @ 29.11.2010 - 14:30)
такую же динамическую?

Я тут еще подумал немного... Зависит еще и от того, сколько данных надо передать между сервером и клиентом для динамичной картики. Если при каждом изменении надо делать выборку из БД (а не то, что показано в одном из образцов), то тут еще надо думать, где же будет лучше делать график.
То, что связано с БД - это может быть какая-то статистика, например.

Цитата (Slays @ 29.11.2010 - 14:49)
канвас мудная штука =)

Интересное слово... Что же имелось ввиду на самом деле? wink.gif

Кстати говоря, в Си (C++Builder) с канвасом похожим образом идет работа, как в этой библиотеке.



Спустя 7 минут, 19 секунд (29.11.2010 - 14:43) Slays написал(а):
ты про какое именно слово =)
raphaeljs основан на канвасе по-моему, вот и сказал )

Спустя 27 минут, 26 секунд (29.11.2010 - 15:10) sergeiss написал(а):
Slays - а я про то слово, которое после канваса у тебя идёт wink.gif То ли канвас "мутный", то ли еще какой... Вот ты что имел ввиду? biggrin.gif

(сорри за оффтоп, но автор темы что-то не отвечает пока на вопросы)

Спустя 5 минут, 45 секунд (29.11.2010 - 15:16) Faantoom написал(а):
Цитата
А почему именно JS, а не на ПХП?

Просто потому, что диаграмма будет перестраиваться с помощью того же JavaScript без перезагрузки страницы.

Что касается этого http://raphaeljs.com/, вещь конечно интересная, но слишком уж навороченная. Там диаграммы динамичные, а мне не нужно всех этих эффектов. Нужно просто чтобы указывались части в процентах, и строилась самая обычная диаграмма, без всяких "плавающих" эффектов, примерно такая как на картинке в моём первом посте.

Буду ждать еще идеи, заранее большое спасибо.

Спустя 7 минут, 53 секунды (29.11.2010 - 15:24) Slays написал(а):
чо серьезно не знаешь слово "мудно" ) ? Да ну нафиг )
Мудно - синонимы: круто, прикольно, забавно и тд user posted image

Жесть, я в шоке, нагуглил что это слово наше городское, чисто местный диалект, думал популярное слово, я в шоке user posted image

Спустя 7 минут (29.11.2010 - 15:31) Basili4 написал(а):
Faantoom
рисуй сам

Спустя 2 минуты, 38 секунд (29.11.2010 - 15:33) Faantoom написал(а):
Цитата
рисуй сам

Интересно как? =)

Спустя 5 минут, 2 секунды (29.11.2010 - 15:38) Basili4 написал(а):
Faantoom
ну если задаешь подобный вопрос то наверное никак.

http://womtec.ru/2009/12/creating-javascri...raph-and-chart/ вот тут ещё погляди.

Спустя 2 минуты, 48 секунд (29.11.2010 - 15:41) Faantoom написал(а):
Всем спасибо за советы, буду искать решение...

Спустя 4 минуты, 51 секунда (29.11.2010 - 15:46) sergeiss написал(а):
Цитата (Slays @ 29.11.2010 - 16:24)
чо серьезно не знаешь слово "мудно" ) ? Да ну нафиг )

А ты этимологию слова знаешь? Т.е. откуда оно происходит??? wink.gif


Цитата (Faantoom @ 29.11.2010 - 16:33)
Интересно как? =)

Очень просто... Если тебе нужно именно на JS делать, то используй уже показанную библиотеку.

Можешь и на ПХП сделать, и перезагрузки страницы не понадобится!!!! Знай только меняй параметры, да передавай нужные данные в скрипт ПХП, который будет строить этот график. А основной скрипт не будет перезагружаться.
Если у тебя появился вопрос "как?", то я сразу отвечу - см. библиотеку GD.

Спустя 7 минут, 53 секунды (29.11.2010 - 15:54) Faantoom написал(а):
Цитата
Можешь и на ПХП сделать

Спасибо за совет, вот только я в этом ни бум-бум smile.gif
ПХП знаю на уровне Хелло Ворд biggrin.gif Ну может немного больше smile.gif

Занимаюсь в основном только дизайном, т.е. HTML + JavaScript

Спустя 1 час, 44 минуты, 15 секунд (29.11.2010 - 17:38) sergeiss написал(а):
Цитата (Faantoom @ 29.11.2010 - 16:54)
Спасибо за совет, вот только я в этом ни бум-бум


Вот и будет хороший поводи изучить :) Потому что просто так сидеть и "кодить" - это неверно. А когда есть определенная задача, то и изучение идет на несколько порядков быстрее.

Как я понял, ты что-то меняешь на странице, и в ответ хочешь получить диаграмму или график.

Объясняю "на пальцах" алгоритм.
1. Надо сделать на странице картинку такого примерно вида:
<img src="diagramm.php" />


2. В зависимости от изменений на странице, меняешь src для данной картинки, примерно так (некие абстрактные параметы, которые можно использовать для "образцовой" диаграммы):
src="diagramm.php?w=500&h=300&perc=70&color=5"

Тут предполагается, что выставляем ширину картинки 500 пикселей, высоту - 300, надо закрасить 70% круга, использовать цвет номер 5.
Естественно, в реальном скрипте могут быть другие параметры :)

3. Надо сделать скрипт diagramm.php, который и построит нужный график, в зависимости от указанных параметров (которые будут приняты в нём как GET-параметры). Этот скрипт будет строить (динамическую) картинку и отдавать её браузеру. И будет он использовать библиотеку GD (запомни сие ключевое слово :))

Браузер, видя изменения в src, будет запрашивать новый источник. То есть, будет вызывать скрипт diagramm.php с новыми параметрами... И так до тех пор, пока тебе не надоест жмякать кнопки на форме.

Получаем: страница, на которой мы что-то делаем, не перезагружается. Но в ответ на действия видим изменения картинки. Результат достигнут.

Я так думаю, что тебе стОит проделать всё это :) На самом деле, сделать такую фигню не сложно. Через несколько часов упорной работы это будет для тебя не сложнее, чем "Хай, пипл!" ;) И даже если ты в итоге остановишься на построении графиков в JS, то хотя бы будешь знать, как это всё делается на ПХП.

PS. Вот раздел http://phpforum.ru/index.php?showforum=107, где есть инфа на эту тему. Почитай там разные темы... Найдешь ответы на все вопросы, которые у тебя могут возникнуть при реализации описанного мной алгоритма.

Спустя 11 минут, 46 секунд (29.11.2010 - 17:50) Faantoom написал(а):
sergeiss, спасибо огромное за подробное обьяснение, респект! =)
Сейчас буду пробовать)

Спустя 26 минут, 5 секунд (29.11.2010 - 18:16) sergeiss написал(а):
Пойду-ка я, пожалуй, сделай новую тему в том разделе... А то столько текста написал smile.gif, жалко, ежели "уйдет" в историю.

Спустя 30 минут, 55 секунд (29.11.2010 - 18:47) Faantoom написал(а):
Прочитал несколько статей по этой теме, нашел пример который рисует нужную диаграмму. Код прокомментирован, так что в принципе всё понятно. Однако, возникло пару вопросов:

1) В коде цвет фона задаётся вот так:
ImageColorAllocate($im,255,255,200);

насколько я понял, цвет задаётся в RGB.
А как сделать прозрачный фон?

2) Нарисованная диаграмма получается с "рваными" краями, возможно ли её как-то сгладить? Какая функция для этого используется?

Заранее спасибо за ответы :)

Спустя 2 часа, 33 минуты, 27 секунд (29.11.2010 - 21:20) sergeiss написал(а):
Faantoom - читай внимательнее хэлпы...
Цитата
Description
int imagecolortransparent ( resource $image [, int $color ] )
Sets the transparent color in the given image.

И потом итоговый файл должен быть обязательно GIF, т.е. используй imagegif() для вывода.

Насчет "рваных краев" не понял... Покажи картинку.

Спустя 23 минуты, 49 секунд (29.11.2010 - 21:44) Faantoom написал(а):
Цитата
итоговый файл должен быть обязательно GIF

А PNG нельзя?
Цитата
Покажи картинку

Можно загладить края чтобы не было так чётко видно пиксели из которых состоит картинка?

Спустя 26 минут, 4 секунды (29.11.2010 - 22:10) sergeiss написал(а):
Цитата (Faantoom @ 29.11.2010 - 22:44)
А PNG нельзя?

Попробуй. В хэлпе, вроде, и ПНГ указан...

Ссылка на хэлп, кстати, у меня в подписи есть...

Вот кратко, подробнее см. сам:

Цитата
bool imageantialias ( resource $image , bool $enabled )

Спустя 1 час, 3 минуты, 25 секунд (29.11.2010 - 23:14) Faantoom написал(а):
sergeiss, Спасибо огромное!

Спустя 10 минут, 4 секунды (29.11.2010 - 23:24) sergeiss написал(а):
Да на здоровье... Приятно что-то объяснять человеку, который сам делает, а не ждет, когда за него сделают smile.gif

Кстати... При желании ты можешь сделать еще и области, чтобы сделать ссылки или всплывающие подсказки, связанные с определенными частями картинки... wink.gif

Спустя 1 час, 34 минуты, 59 секунд (30.11.2010 - 00:59) Faantoom написал(а):
Цитата
можешь сделать еще и области, чтобы сделать ссылки или всплывающие подсказки

Да это в принципе и не нужно в этой ситуации, но за идею спасибо)
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.