2017-01-08 3 views
1

Я использую рисование диаграммы, чтобы отобразить график временной шкалы Google. В то время как это работает очень хорошо из коробки, я прочитал в документации Google, что я также может включать в себя бар ярлык:Как получить ярлык на диаграмме Google с графиком Chartkick

https://developers.google.com/chart/interactive/docs/gallery/timeline#labeling-the-bars

Есть ли возможность, чтобы добавить, что дополнительный столбец в DataTable с помощью Чарткика?

Я в основном это нужно, чтобы быть вызван до Timeline визуализируется:

dataTable.addColumn({ type: 'string', id: 'Name' });

Благодарности

Пример кода:

<%= timeline [ 
    ["Washington", "1789-04-29", "1797-03-03"], 
    ["Adams", "1797-03-03", "1801-03-03"], 
    ["Jefferson", "1801-03-03", "1809-03-03"] 
] %> 
+0

Я добавил образец кода. Как вы видите, команда timeline из chartkick принимает только три параметра. –

+0

, и я полагаю, вы попытались предоставить больше столбцов в данных? можете ли вы получить доступ к объекту диаграммы через javascript после того, как он был нарисован на клиенте? – WhiteHat

ответ

0

Это требует изменения в источнике, chartkick .js:

Во-первых, y НУ нужно добавить строку, описывающую новый столбец данных в начале «this.renderTimeline» (я назвал его Label):

... 
var data = new google.visualization.DataTable(); 
      data.addColumn({type: "string", id: "Label"}); 
      data.addColumn({type: "string", id: "Name"}); 
      data.addColumn({type: "date", id: "Start"}); 
      data.addColumn({type: "date", id: "End"}); 
      data.addRows(chart.data); 

Во-вторых, вам необходимо обновить функцию «processTime», добавив 1 до значений массива (поскольку мы увеличили размер массива на 1):

function processTime(chart) 
    { 
    var i, data = chart.rawData; 
    for (i = 0; i < data.length; i++) { 
     data[i][2] = toDate(data[i][2]); // from data[i][1] 
     data[i][3] = toDate(data[i][3]); // from data[i][2] 
    } 
    return data; 
    } 
Смежные вопросы