У меня есть временная диаграмма / панель инструментов, сгенерированная из данных Google Sheet. Я хотел бы иметь возможность щелкнуть ссылку во всплывающей подсказке, чтобы открыть документ Google. Исходные данные листа Google содержат URL-адрес определенного документа Google в столбце всплывающей подсказки. Очевидно, это не поддерживается действие для временных шкал, но я видел аналогичные обходные пути.
Добавление гиперссылки на пользовательскую подсказку в Google Charts
Как я могу сделать эту функцию обхода для данных, поступающих из Google Sheet, а не жестко закодированных в HTML?
Вот моя панель:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(buildTimeline);
function buildTimeline() {
var queryString = encodeURIComponent('SELECT B,A,E,C,D');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1durFFoL3H6m-z8sQsSxGETaWNTKgs-TrSfJFjJ1ntRs/gviz/tq?gid=299236031&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
height: 300,
tooltip: {isHtml: true, trigger: 'selection'}
};
var data = response.getDataTable();
// set the 3rd column to the "tooltip" role
data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that categoryFilter is visible to changeRange.
var categoryFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Grade Level',
'chartArea': {'height': '100%'}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'programmatic_chart_div',
'options': {
'width': 800,
'height': 500
}
});
dashboard.bind(categoryFilter, programmaticChart);
dashboard.draw(data, options);
}
</script>
</head>
<body>
<div id="programmatic_dashboard_div">
<table class="columns">
<tr style='vertical-align: top'>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
<script type="text/javascript">
function changeRange() {
categoryFilter.draw();
}
function changeOptions() {
programmaticChart.draw();
}
</script>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Снимок экрана Это то, что я сейчас вижу, но я не могу нажать на ссылку во всплывающей подсказке.