问题
I have quite complex timeline with lots of items.
I'm trying to create a link for the contract details straight from the timeline, so that when the user clicks the element it has the option to follow the link. This is what i have so far:
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:'cliente', 'p': {'html': true} });
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), 'Serra Lopes, Cortes Martins & Associados', '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), 'Serra Lopes, Cortes Martins & Associados', 'detalhe_fraccao.php?id= 1'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'Serra Lopes, Cortes Martins & Associados', 'detalhe_fraccao.php?id= 34']
]);
var options1 = {
chartArea: {
left: 40,
width: '100%',
},
timeline: {
groupByRowLabel: true,
singleColor: 'green' ,
showRowLabels: true },
width: '100%',
height: 600,
};
function drawChart1() {
chart1.draw(data1, options1);
}
drawChart2();
Does anyone haves a clue?
回答1:
first, the data format for the Timeline chart specifies:
in order to provide non-default tooltips,
every row of your datatable must have all five columns
(row label, bar label, tooltip, start, and end)
with the tooltip column as the third column.
see customizing tooltips...
however, the only option to trigger the tooltip is 'focus'.
this will cause the tooltip to disappear when the mouse leaves the element.
the user will not be able to click the link.
other chart's have a 'selection' trigger, which locks the tooltip in place.
see following working snippet for an example...
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>instead, recommend using the 'select' event to open the site.
when a user select's an element, open the site.
to store the link in the data table,
add the column as the last column,
so the timeline will ignore it.
see following working snippet...
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>note: the link won't open from the above snippet,
but should work fine from your own page...
回答2:
In addition to @whitehat solution just added a confirmation dialog: (also changed the link column to 5 instead of 4)!
google.visualization.events.addListener(chart1, 'select', function () {
var selection = chart1.getSelection();
if (selection.length > 0) {
window.confirm("Deseja consultar este contrato?");
window.open(data1.getValue(selection[0].row, 5), '_blank');
console.log(data1.getValue(selection[0].row, 5));
}
});
Thank you @Whitehat for your always helpful support!
来源：https://stackoverflow.com/questions/53765184/creating-a-link-from-google-chart-timeline-item