Создание ссылки из элемента временной шкалы 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();
Кто-нибудь знает?
Ответы 2
Во-первых, формат данных для временной шкалы указывает:
для предоставления подсказок не по умолчанию,
каждая строка вашей таблицы данных должна иметь все пять столбцов
(подпись строки, подпись полосы, всплывающая подсказка, начало и конец)
со столбцом всплывающей подсказки в качестве третьего столбца.
см. настройка всплывающих подсказок ...
однако единственный способ вызвать всплывающую подсказку - это '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>вместо этого рекомендуется использовать событие '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.info(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>примечание: ссылка не открывается из приведенного выше фрагмента,
но должен нормально работать с вашей собственной страницы ...
просто решено с помощью 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.info (data1.getValue (selection [0] .row, 5));}});
В дополнение к решению @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.info(data1.getValue(selection[0].row, 5));
}
});
Спасибо @Whitehat за вашу всегда полезную поддержку!
работает отлично!!! Благодарность!!! Любая идея, как я могу добавить диалоговое окно подтверждения, чтобы избежать нежелательных щелчков?