具有多个列角色的Google时间线图表

问题描述 投票:1回答:1

我正在尝试绘制时间线图表,并添加两个列角色,一个用于HTML链接(工具提示列角色),另一个用于样式(样式)。我可以成功使用其中任何一个,但不能同时使用。例如,这是我的代码示例:

var container = document.getElementById('mychart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });

我相信这与列的位置有关。在上面的示例中,样式正确完成,但是超链接是由工具提示内容而不是我传递的实际列角色数据构成的。

如果删除style列角色,即使将超链接放置在列的最后,超级链接也可以正常工作。这使我认为我不能只担任一个专栏作家,但这不是文档所说的。任何线索将不胜感激。

charts google-visualization
1个回答
0
投票

为了使列具有可点击的超链接,您需要额外的一段代码:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      window.open(dataTable.getValue(selection[0].row, 3), '_blank');
    }
    });

我用于调试的单行数据是:

dataTable.addRows([
['My text here', 'bar label', '#676767', 'https://www.google.com', new Date(2019, 12, 22), new Date(2019, 12, 26)]]);

我绕过了各列,并指向了错误的列。只需更改到上面的右列即可使其工作(第3列,从零开始)。

© www.soinside.com 2019 - 2024. All rights reserved.