添加超級鏈接到谷歌圖表中的自定義工具提示

Question

使用此workaround，我能夠模仿谷歌時間表圖表選擇時的工具提示。這個問題是，我打算有一個郵件鏈接在工具提示供用戶點擊。但是，在我的功能creatToolTip()中，工具提示已創建，但我無法點擊聯繫人鏈接。什麼是正確的方法來做到這一點？

編輯：我也試過Google's tooltip actions，但它不支持時間線圖表。

google.setOnLoadCallback(drawVisualization); 
 

 
function drawVisualization() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ 
 
    type: 'string', 
 
    id: 'President' 
 
    }); 
 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
 
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}}); 
 
    dataTable.addColumn({ 
 
    type: 'date', 
 
    id: 'Start' 
 
    }); 
 
    dataTable.addColumn({ 
 
    type: 'date', 
 
    id: 'End' 
 
    }); 
 
    dataTable.addRows([ 
 
    ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)], 
 
    ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)], 
 
    ['Jefferson', 'test', createToolTip(), new Date(1801, 2, 4), new Date(1809, 2, 4)] 
 
    ]); 
 
    //select-handler 
 
    google.visualization.events.addListener(chart, 'select', function(e) { 
 
    //the built-in tooltip 
 
    var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])'); 
 
    //remove previous clone when there is any 
 
    if (chart.ttclone) { 
 
     chart.ttclone.parentNode.removeChild(chart.ttclone) 
 
    } 
 
    //create a clone of the built-in tooltip 
 
    chart.ttclone = tooltip.cloneNode(true); 
 
    //create a custom attribute to be able to distinguish 
 
    //built-in tooltip and clone 
 
    chart.ttclone.setAttribute('clone', true); 
 
    //inject clone into document 
 
    tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip); 
 
    }); 
 

 
    chart.draw(dataTable, {tooltip: {isHtml: true }}); 
 
} 
 

 
function createToolTip() { 
 
     var mainDiv = '<div >'; 
 
     var list = 
 
      '<ul class="google-visualization-tooltip-action-list">' + 
 
       '<li class="google-visualization-tooltip-action">' + 
 
        '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' + 
 
         '<a href="mailto:test@test.com?Subject=test">Contact</a>' + 
 
        '</span>' + 
 
       '</li>' + 
 
      '</ul>'; 
 
     var endMainDiv = '</div>'; 
 
     var tooltip = mainDiv + list + endMainDiv; 
 
     return tooltip; 
 
    }

.google-visualization-tooltip { 
 
    opacity: 0 !important; 
 
    max-width: 200px !important; 
 
} 
 
.google-visualization-tooltip[clone] { 
 
    opacity: 1 !important; 
 
} 
 
html, 
 
body, 
 
timeline { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script> 
 
<div id='timeline' style="height:90%"></div>

Answer 1

看起來像pointer-events默認

變化注入克隆回DOM

//inject clone into document 
chart.ttclone.style.pointerEvents = 'auto'; 
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip); 

看到下面的工作片段之前設置爲'none'到'auto' .. 。

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ 
 
     type: 'string', 
 
     id: 'President' 
 
    }); 
 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
 
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}}); 
 
    dataTable.addColumn({ 
 
     type: 'date', 
 
     id: 'Start' 
 
    }); 
 
    dataTable.addColumn({ 
 
     type: 'date', 
 
     id: 'End' 
 
    }); 
 
    dataTable.addRows([ 
 
     ['Washington', 'test', createToolTip(), new Date(1789, 3, 30), new Date(1797, 2, 4)], 
 
     ['Adams', 'test', createToolTip(), new Date(1797, 2, 4), new Date(1801, 2, 4)], 
 
     ['Jefferson', 'test', createToolTip(), new Date(1801, 2, 4), new Date(1809, 2, 4)] 
 
    ]); 
 
    //select-handler 
 
    google.visualization.events.addListener(chart, 'select', function(e) { 
 
     //the built-in tooltip 
 
     var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])'); 
 
     //remove previous clone when there is any 
 
     if (chart.ttclone) { 
 
     chart.ttclone.parentNode.removeChild(chart.ttclone) 
 
     } 
 
     //create a clone of the built-in tooltip 
 
     chart.ttclone = tooltip.cloneNode(true); 
 
     //create a custom attribute to be able to distinguish 
 
     //built-in tooltip and clone 
 
     chart.ttclone.setAttribute('clone', true); 
 
     //inject clone into document 
 
     chart.ttclone.style.pointerEvents = 'auto'; 
 
     tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip); 
 
    }); 
 

 
    function createToolTip() { 
 
     var mainDiv = '<div style="z-index: 1000;">'; 
 
     var list = 
 
      '<ul class="google-visualization-tooltip-action-list">' + 
 
       '<li class="google-visualization-tooltip-action">' + 
 
        '<span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); margin: 0px; text-decoration: none; font-weight: bold;">' + 
 
         '<a href="mailto:test@test.com?Subject=test">Contact</a>' + 
 
        '</span>' + 
 
       '</li>' + 
 
      '</ul>'; 
 
     var endMainDiv = '</div>'; 
 
     var tooltip = mainDiv + list + endMainDiv; 
 
     return tooltip; 
 
    } 
 

 
    chart.draw(dataTable, {tooltip: {isHtml: true }}); 
 
    }, 
 
    packages: ['timeline'] 
 
});

.google-visualization-tooltip { 
 
    opacity: 0 !important; 
 
    max-width: 200px !important; 
 
} 
 
.google-visualization-tooltip[clone] { 
 
    opacity: 1 !important; 
 
} 
 
html, 
 
body, 
 
timeline { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="timeline" style="height:90%"></div>