först dataformatet för tidslinjediagrammet anger:
för att tillhandahålla verktygstips som inte är standard,
måste varje rad i din datatabell ha alla fem kolumner
(radetikett, stapeletikett, verktygstips, start och slut)
med verktygstipskolumnen som den tredje kolumnen.
se anpassa verktygstips a> ...
Det enda alternativet för att aktivera verktygstipset är dock 'focus' .
detta gör att verktygstipset försvinner när musen lämnar elementet.
användaren kommer inte att kunna klicka på länken.
andra diagram har ett 'val' avtryckare, som låser verktygsspetsen på plats.
se följande arbetskodavsnitt för ett exempel...
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>
rekommenderar istället att du använder 'select' händelse för att öppna webbplatsen.
när en användare väljer ett element, öppna webbplatsen.
för att lagra länken i datatabellen,
lägg till kolumnen som den sista kolumnen,
så tidslinjen kommer att ignorera det.
se följande fungerande kodavsnitt...
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>
Obs:länken öppnas inte från ovanstående kodavsnitt,
men bör fungera bra från din egen sida...