tout d'abord, le format de données pour le graphique Chronologie spécifie :
afin de fournir des info-bulles autres que celles par défaut,
chaque ligne de votre tableau de données doit avoir les cinq colonnes
(étiquette de ligne, étiquette de barre, info-bulle, début et fin)
avec la colonne d'info-bulle comme la troisième colonne.
voir personnaliser les info-bulles ...
cependant, la seule option pour déclencher l'info-bulle est 'focus' .
cela entraînera la disparition de l'info-bulle lorsque la souris quittera l'élément.
l'utilisateur ne pourra pas cliquer sur le lien.
d'autres graphiques ont un 'selection' déclencheur, qui verrouille l'info-bulle en place.
voir l'extrait de travail suivant pour un exemple...
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>
à la place, recommandez d'utiliser le 'select' événement pour ouvrir le site.
lorsqu'un utilisateur sélectionne un élément, ouvre le site.
pour stocker le lien dans la table de données,
ajoutez la colonne comme dernière colonne,
donc la chronologie l'ignorera.
voir l'extrait de travail suivant...
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>
remarque :le lien ne s'ouvrira pas à partir de l'extrait ci-dessus,
mais devrait fonctionner correctement à partir de votre propre page...
