Googleカレンダーチャートのリンクをクリックするのに十分長いツールヒント

Question

ユーザーが日付をクリックすると、リンクを含むカスタムHTMLを含むツールチップが表示されるようにGoogleカレンダーチャートを設定しようとしています。私はツールヒントを保持して、ユーザーがツールチップのリンクを実際にクリックできるようにします。私はtooltip: {trigger: 'selection'}を追加しようとしましたが、何もしません。誰でもツールチップを永続させる方法を知っていますか？ありがとう！

<script type="text/javascript" id="capture-dates-calendar"> 
    google.charts.load("current", {packages:["calendar"]}); 
    google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn({ type: 'date', id: 'Date' }); 
    dataTable.addColumn({ type: 'number', id: 'Captures' }); 
    dataTable.addColumn({ type: 'string', role: 'tooltip', p: {'html': true} }); 
    dataTable.addRows([ 
     [ new Date(2016,6,10),2,'<div class="calendar-tooltip"><h5>July 10, 2016</h5><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>'] 
     ]); 

    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 

    var options = { 
     focusTarget: 'category', 
     tooltip: { 
      isHtml: true, 
      trigger: 'selection' 
     }, 
     colorAxis: { minValue: 1, colors: ['#17649a', '#0b2e47'] } 
    };      

    chart.draw(dataTable, options); 

} 
</script> 

Answer 1

trigger: 'selection'は、あなたが作業の例以下を参照してください別のdivで同じツールチップを表示するために

を'select'イベントを使用することができconfig options

から欠落している理由である必要があります...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({ type: 'date', id: 'Date' }); 
 
    dataTable.addColumn({ type: 'number', id: 'Captures' }); 
 
    dataTable.addColumn({ type: 'string', role: 'tooltip', p: {'html': true} }); 
 
    dataTable.addRows([ 
 
     [ new Date(2016,6,10),2,'<div class="calendar-tooltip"><h5>July 10, 2016</h5><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>'] 
 
    ]); 
 

 
    var options = { 
 
     focusTarget: 'category', 
 
     tooltip: { 
 
     isHtml: true 
 
     }, 
 
     colorAxis: { minValue: 1, colors: ['#17649a', '#0b2e47'] } 
 
    }; 
 

 
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 
 
    var tooltip = document.getElementById('calendar_tooltip'); 
 
    google.visualization.events.addListener(chart, 'select', function() { 
 
     var selection = chart.getSelection(); 
 
     if ((selection.length > 0) && (selection[0].hasOwnProperty('row'))) { 
 
     tooltip.innerHTML = dataTable.getValue(selection[0].row, 2); 
 
     } else { 
 
     tooltip.innerHTML = ''; 
 
     } 
 
    }); 
 

 
    chart.draw(dataTable, options); 
 
    }, 
 
    packages: ['corechart', 'calendar'] 
 
});

#calendar_tooltip { 
 
    background-color: #FFFFFF; 
 
    border: 1px solid #E0E0E0; 
 
    height: 156px; 
 
    width: 128px; 
 
    text-align: center; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="calendar_basic"></div> 
 
<div id="calendar_tooltip"></div>