2014-12-23 3 views
4

Я использую chartckick в моем проекте RoR для создания диаграмм, который работает довольно хорошо. (вместе с Google Charts).Диаграммы диаграмм Chartkick несколько цветов

Я создал column chart с всего 2 бара (мужской и женский).

enter image description here

И теперь клиент хочет, чтобы каждый бар имеют разный цвет? Это возможно?

Я видел это сообщение - How to change the color of a Column-chart created with Chartkick?, но это больше половины года, и я надеюсь, что теперь есть возможность указать больше цветов для баров.

Update

Мой код выглядит следующим образом:

контроллер

@followers_gender_count = Project.find(params[:id]).followers.group(:gender).count 

Просмотр

<%= column_chart parse_gender_data(@followers_gender_count) %> 

Helper

def parse_gender_data(data) 
    gender_data = Hash.new 
    gender_data[:male] = data[1] 
    gender_data[:female] = data[2] 
    ({ 'Male' => gender_data[:male], 'Female' => gender_data[:female] }) 
end 

Update 2 - Issue on GitHub

ответ

3

От @buren's comment on GitHub кажется, что использование другой структуры JSON вызовет разные цвета на column_cart.


Я изменил выход в Helper:

def parse_gender_data(data) 
    gender_data = Hash.new 
    gender_data[:male] = data[1] 
    gender_data[:female] = data[2] 
    [{"name" => "Male","data" => {"Gender" => gender_data[:male]}},{"name" => "Female","data" => {"Gender" => gender_data[:female]}}] 
end 

И создал chartkick.rbконфигурационный файл (config/initializers/chartkick.rb), добавив некоторые цвета:

Chartkick.options = { 
    colors: ["#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8"] 
} 


, который выводит СТРЕМЯСЬ результат:

enter image description here

1

Вы видели ColumnStyles

function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Visitations', { role: 'style' } ], 
     ['2010', 10, 'color: gray'], 
     ['2010', 14, 'color: #76A7FA'], 
     ['2020', 16, 'opacity: 0.2'], 
     ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], 
     ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] 
     ]); 

, но посмотрите на ссылку есть некоторые действительно интересные вещи там

+0

Как применить этот код в Ruby? Я обновил OP своим кодом. – Vucko

+0

@ Vucko do, где у вас есть настройки для цветов или стиля, которые вы хотите использовать? – MZaragoza

+0

@ Vucko взгляните на https://github.com/ankane/chartkick/blob/master/lib/chartkick/helper.rb строки (15-17), вы можете видеть, что он принимает 2 параметра 'data_source' и' options' как хэш, поэтому вы можете сделать '<% = column_chart parse_gender_data (@followers_gender_count, style_hash)%>' – MZaragoza

6

Следующая также работает. Мне не нужны новые файлы в инициализаторах (нет диаграммы.гь файл), это просто работал, добавив следующий код в мой помощник файла:

def networth_data 
    [ 
     {name: "Assets", data: {"NetWorth": 6979.53}}, 
     {name: "Liabilities", data: {"NetWorth": 10532.32}} 
    ] 
    end 

И тогда в моем html.erb я указаны цвета и другие параметры, которые я хотел:

<%= column_chart networth_data, 
    colors: ["green", "#FF0000"], 
    library: {backgroundColor: "#FFF", height: 265} %> 

.. .renders этот график:

enter image description here

Смежные вопросы