javascript - 动态更改 Google Charts 中的 View 列名称

Question

我的数据如下

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]
]);

在图表中绘制此图表时，我想显示在“~”符号后拆分的标签值，即( bat 侠、超人、海王)。在我的图表的 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
}

如何用新列名替换旧列名？

Answer 1

使用方法--> setColumnLabel

然而，这个方法在 View 上不存在，
所以你必须更改数据表上的列标签

由于 View 是基于数据表的，
View 也选择了新标签...

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);
}

编辑

不是使用标签来存储两个值，
利用列上可用的属性。

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')