Создание ссылки из элемента временной шкалы Google Chart

Question

Создание ссылки из элемента временной шкалы Google Chart

У меня довольно сложный график с большим количеством предметов.

Я пытаюсь создать ссылку на детали контракта прямо с временной шкалы, чтобы, когда пользователь щелкает элемент, у него была возможность перейти по ссылке.
Это то, что я имею до сих пор:

    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();

У кого-нибудь есть подсказка?

1

google-visualization interactive mysql php timeline

Решение

По вопросам рекламы [email protected]

Accepted Answer

во-первых, формат данных для графика времени указывается:

чтобы обеспечить подсказки не по умолчанию,
каждая строка вашей таблицы данных должна иметь все пять столбцов
(метка строки, метка строки, всплывающая подсказка, начало и конец)
со столбцом всплывающей подсказки в качестве третьего столбца.
увидеть настройка подсказок…

тем не менее, единственная возможность вызвать всплывающую подсказку 'focus',
это приведет к исчезновению всплывающей подсказки, когда мышь покидает элемент.
пользователь не сможет нажать на ссылку.
другие диаграммы имеют 'selection' триггер, который фиксирует подсказку на месте.

см. следующий рабочий фрагмент для примера …

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>

1

Другие решения

В дополнение к решению @whitehat добавлен диалог подтверждения:
(также изменил колонку ссылок на 5 вместо 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));
}
});

Спасибо @Whitehat за вашу всегда полезную поддержку!

0

Источник