Динамически изменять имена столбцов представления в Google Charts - PullRequest
Новая
       3

Динамически изменять имена столбцов представления в Google Charts

0 голосов
/ 21 сентября 2018

Мои данные как показано ниже 

var data = google.visualization.arrayToDataTable([
  ['Date', 'A|36~Batman', 'A|37~Superman', 'A|38~Aquaman'],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

При построении этого графика на графике я хочу показать значения меток, разделенные после знака «~», т. Е. (Бэтмен, Супермен, Аквамен).Мне нужны значения перед тильдой во время события OnClick на моем графике, поэтому мне нужны эти значения в данных, так как мой код onclick такой, как показано ниже 

var col = chart.getSelection()[0]['column'];
var Id = data.getColumnLabel(col).substr(0, data.getColumnLabel(col).indexOf("~"));

Так что для получения данных мне также нужны значения Id,Мне удалось зациклить столбцы и изменить значения меток столбцов, но я не знаю кода для установки меток столбцов в качестве новых значений.Мой код для цикла выглядит следующим образом: 

var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
    var ColumnName = view.getColumnLabel(i);
    var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
    // set new column name in the view
}

Как заменить старое имя столбца новым именем столбца?

1 Ответ

0 голосов
/ 21 сентября 2018

метод использования -> setColumnLabel

однако этот метод не существует в представлении,
, поэтому вам придется изменить метку столбца в таблице данных

поскольку представление основано на таблице данных,
представление также подбирает новую метку ... 

var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
    var ColumnName = view.getColumnLabel(i);
    var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
    data.setColumnLabel(i, NewColumnName);
}

EDIT

вместоиспользуя метку для хранения двух значений,
используйте свойства, доступные в столбце.

var data = google.visualization.arrayToDataTable([
  ['Date', {id: 'A|36', label: 'Batman'}, {id: 'A|37', label: 'Superman'}, {id: 'A|38', label: 'Aquaman'}],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

тогда вы можете использовать методы -> getColumnId() & getColumnLabel()

, если этого недостаточно, вы можете предоставить свои собственные свойства ... 

var data = google.visualization.arrayToDataTable([
  ['Date', {id: '36', label: 'Batman', p: {category: 'A'}}, {id: '37', label: 'Superman', p: {category: 'A'}}, {id: '38', label: 'Aquaman', p: {category: 'A'}}],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

затем используйте метод -> getColumnProperty(1, 'category')

...