първо, формата на данните за графиката на времевата линия посочва:
за да предоставите подсказки по подразбиране,
всеки ред от вашата таблица с данни трябва да има всичките пет колони
(етикет на ред, етикет на лентата, подсказка, начало и край)
с колоната с подсказка като третата колона.
вижте подсказките за персонализиране ...
обаче единствената опция за задействане на подсказката е 'focus'
.
това ще накара подсказката да изчезне, когато мишката напусне елемента.
Потребителят няма да може да щракне върху връзката.
Други диаграми имат „селекция“код> спусък, който заключва подсказката на място.
вижте следния работен фрагмент за пример...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
var data1 = new google.visualization.DataTable();
data1.addColumn({ type: 'string', id: 'fracao' });
data1.addColumn({ type: 'string', id: 'contrato' });
data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
data1.addColumn({ type: 'date', id: 'Start' });
data1.addColumn({ type: 'date', id: 'End' });
data1.addRows([
['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=35">Serra Lopes, Cortes Martins & Associados</a>', new Date(2018, 5, 01), new Date(2019, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=1">Serra Lopes, Cortes Martins & Associados</a>', new Date(2007, 2, 01), new Date(2013, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=34">Serra Lopes, Cortes Martins & Associados</a>', new Date(2017, 5, 01), new Date(2018, 4, 31)]
]);
var options1 = {
chartArea: {
left: 40,
width: '100%',
},
timeline: {
groupByRowLabel: true,
singleColor: 'green' ,
showRowLabels: true
},
tooltip: {
isHtml: true
},
width: '100%',
height: 600,
};
function drawChart1() {
chart1.draw(data1, options1);
}
drawChart1();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>
вместо това препоръчваме да използвате 'select'
събитие, за да отворите сайта.
когато потребител избере елемент, отворете сайта.
за да съхраните връзката в таблицата с данни,
добавете колоната като последна колона,
така че времевата линия ще го игнорира.
вижте следния работен фрагмент...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
var data1 = new google.visualization.DataTable();
data1.addColumn({ type: 'string', id: 'fracao' });
data1.addColumn({ type: 'string', id: 'contrato' });
data1.addColumn({ type: 'date', id: 'Start' });
data1.addColumn({ type: 'date', id: 'End' });
data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
data1.addRows([
['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2018, 5, 01), new Date(2019, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2007, 2, 01), new Date(2013, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'detalhe_fraccao.php?id=35']
]);
var options1 = {
chartArea: {
left: 40,
width: '100%',
},
timeline: {
groupByRowLabel: true,
singleColor: 'green' ,
showRowLabels: true
},
width: '100%',
height: 600,
};
google.visualization.events.addListener(chart1, 'select', function () {
var selection = chart1.getSelection();
if (selection.length > 0) {
window.open(data1.getValue(selection[0].row, 4), '_blank');
console.log(data1.getValue(selection[0].row, 4));
}
});
function drawChart1() {
chart1.draw(data1, options1);
}
drawChart1();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>
забележка:връзката няма да се отвори от горния фрагмент,
но трябва да работи добре от вашата собствена страница...