Google Visualization Timeline图表DataTable添加自定义列报错问询

问题原因说明 #

1. 报错是否为固有列数限制 #

是，Timeline图表对无显式role属性的基础数据列有固定的格式要求，仅支持3种合法结构：

• 3列：行分组标签、开始时间、结束时间
• 4列：行分组标签、条形显示标签、开始时间、结束时间
• 5列：行分组标签、条形显示标签、自定义tooltip文本、开始时间、结束时间
  你原有可运行的代码刚好符合5列的合法结构，新增的无role属性的RecID列超出了基础列允许的最大数量，因此触发列无效报错。

2. 为什么Style列可正常添加 #

Style列属于带明确role: 'style'的角色列，Timeline会将所有带role属性的列识别为功能附加列，不计入基础数据列的计数限制，因此可以正常添加。
你之前遇到的Style列放最后不生效的问题，是因为角色列有位置要求：style、tooltip这类作用于特定数据的角色列，必须紧跟在其要作用的目标列之后，放最后找不到对应作用目标就会失效，并非代码自动移除了该列。

3. 报错信息与官方文档不一致的原因 #

官方文档标注的5列，指的是不含角色列的基础数据列最大数量，报错提示的「仅支持3-4个数据列」是旧版本遗留的未更新文案，属于已知的提示信息不同步问题，官方暂无单独的公开说明。

解决方法 #

给你要新增的RecID列添加任意自定义role属性即可，无需其他修改：

// 错误写法：无role属性，会被识别为基础数据列触发限制
// dataTable.addColumn({ type: 'string', id: 'RecID' });

// 正确写法：添加自定义role，被识别为附加列不触发限制
dataTable.addColumn({ type: 'string', id: 'RecID', role: 'record-id' });

添加后你可以在点击事件中正常获取该列值做跳转：

function myClickHandler(){
  var selection = chart.getSelection();
  if(selection.length && selection[0].row != null){
    var rowIndex = selection[0].row;
    var recordId = dataTable.getValue(rowIndex, 5);
    // 此处添加跳转逻辑即可，比如 window.location.href = '/detail?id=' + recordId
  }
}

内容的提问来源于stack exchange，提问作者J7Ts