Графики в RoR

Март 22, 2007 8:38 пп автор Evgeniy Petrov  |  Рубрики: RubyOnRails  |  Метки: No Tags  

Рисование графиков в RoR.

Сначала необходимо установить плагин Gruff (он использует RMagic, так что нужно установить и его). После перезапуска сервера уже можно начинать рисовать, но лучше воспользоваться встроенными средствами. Плагин включает в свой состав генератор, так что первый график можно получить, выполнив:


ruby script/generate gruff graphic show


Осталась еще одна маленькая деталь – нужно открыть controllers/graphic и подправить следующую строчку:
g.font = File.expand_path(’artwork/fonts/VeraBd.ttf’, RAILS_ROOT)

так, что бы путь указывал на существующий файл со шрифтом. У меня это вот:


g.font = File.expand_path('public/images/fonts/arialbd.ttf', RAILS_ROOT)

Вот и все! Теперь по адресу /articles/show будет доступен наш первый график. Теперь самое время полюбоваться и разобраться, как именно рисуется график. Начнем с создания объекта. Метод new принимает одно значение – ширину будущего графика (по умолчанию равно 400 пикселам) , высота вычисляется как 75% от ширины.


g = Gruff::Line.new

Именно эта строчка определяет, какой именно график будет построен. Для каждого варианта есть свой отдельный модуль в директории Gruff/lib/gruff - но оглашу весь список.

Gruff::Line - классический график. Каждому набору значение соответствует своя линия
Gruff::AccumulatorBar – гистограмма со всего одним набором значений, выводится текущее значение и сумма всех предыдущих.
Gruff::Area – показываются плавные линии с заливкой области снизу.
Gruff::Bar – классическая гистограмма
Gruff::Net – «Роза ветров», может отображать несколько наборов данных
Gruff::Pie – куски пирога. Простой и понятный график
Gruff::SideBar – гистограмма, но столбцы растут слева.
Gruff::Scene – позволяет создавать изображения, комбинируя различные рисунки.

Кроме того есть еще Gruff::PhotoBar, Gruff::Spider, Gruff::StackedBar, Gruff::SideStackedBar.

Теперь что касается раскрасок. При желании можно задать цвета вручную, а можно применить уже готовые цветовые схемы.
theme_keynote (используется по умолчанию)
theme_37signals
theme_rails_keynote
theme_odeo
theme_pastel
theme_greyscale

Для желающих поэкспериментировать генератором вставлены следующие строки


     g.theme = {
       :colors => ['#663366', '#cccc99', '#cc6633', '#cc9966', '#99cc99'],
       :marker_color => 'white',
       :background_colors => ['black', '#333333']} # градиент получается автоматически

Кроме того, можно изменить размеры шрифтов. Для этого служат следующие параметры
g.marker_font_size, g.legend_font_size, g.title_font_size. За заголовок отвечает g.title.

Теперь что касается данных. В общем случае, данные задаются строкой заголовка и массивом значений. Значение nil игнорируется и не влияет на вывод данных.


g.data("Random", Array.new(30){rand(100)})

Каждый следующий вызов обеспечит еще один набор значений, однако некоторые виды графиков могут отобразить только один набор, а другие бесполезны для одного значения (например, Gruff::Pie). Отметки по оси абсцисс формируются автоматически, а метки по оси ординат нужно проставлять вручную, для чего используется хеш.


g.labels = {0 => '1', 1 => '2',.... 29 => '30'}  или так:  1.upto(30){|i| g.labels[i-1] = i.to_s}

Вот и все, теперь можно выводить график на экран. По умолчанию, картинка преобразуется в BLOB и отсылается браузеру. Отмечу, что при генерации gruff контроллера views не создаются. Учитывая небольшую скорость работы плагина (и если данные обновляются достаточно редко), желательно сначала записывать изображение в файл (.png, .jpg, .gif ), и уже потом их потом их выводить.


send_data(g.to_blob, :type => 'image/png', :filename => "gruff.png")
либо
g.write(“Path_to_file”)

полностью код примера


    def index
	...
        @file = show()
	...
    end

private
  def show
    g = Gruff::Line.new
    # Цветовая тема
    g.theme_keynote
    # Темы устанавливают свой шрифт, поэому переопределим
    g.font = File.expand_path('public/images/fonts/tahoma.ttf', RAILS_ROOT)
    # Установим заголовок
    g.title = "Simple graphic"
    # Размер по умолчанию слишком крупный
    g.marker_font_size = 10.0
    # рандомные данные по мышам и леммингам
    size = 30
    g.data("Mouses", Array.new(size){50 + rand(50)})
    g.data("Lemmings", Array.new(size){75 + rand(50)})
    # метки по оси Х
    1.upto(size){|i| g.labels[i-1] = i.to_s}

    filename = "gruff.png"
    # запись в файл
    g.write('public/images/artworks/'+ filename)
    '/images/artworks/'+ filename
  end

Пример графиков:
13_3_20071.png
gruff.png

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5 out of 5)
Loading ... Loading ...

Добавить комментарий »

Олег Курносов:

ОО, знакомые графики, один из них точно юзается в каком-то из наших проектов) Приятно)

( Comment от Олег Курносов — Март 23, 2007 @ 6:20 пп )
sh0ck_file:

2 Олег: эт ты про леммингов имеешь в виду? %)

( Comment от sh0ck_file — Март 23, 2007 @ 6:39 пп )
Олег Курносов:

На самом деле граффик выше) Видимо он используется на странице вывода статистики по траффику для какого-то сайта)

( Comment от Олег Курносов — Март 23, 2007 @ 6:51 пп )
Ярослав Дмитриев:

“mice” ;)

( Comment от Ярослав Дмитриев — Март 24, 2007 @ 1:11 дп )
Олег Курносов:

Mouses -> mice….Сразу видно человек тоже работает не только на отечественном рынке ПО) Thank you for the notice)

( Comment от Олег Курносов — Март 25, 2007 @ 4:05 пп )

Оставить комментарий