Google Calendar Chart HTML Tooltip以字符串形式顯示HTML標記

Question

<script type="text/javascript"> 
    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([ 
     {fn:string-join($capture-dates, ",")} 
     ]); 

    var chart = new google.visualization.Calendar(document.getElementById('capture-dates-calendar')); 

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

    chart.draw(dataTable, options); 
}} 
</script> 

以上是我用於在XQuery應用程序中創建Google Calendar Charts的代碼。所有數據都能正確顯示，但我想將自定義HTML添加到日曆工具提示中。而不是解析HTML，實際的HTML標籤顯示爲一個字符串。

這裏的工具提示的截圖：https://www.flickr.com/gp/143914092@N07/M783C9

這裏是它的外觀在控制檯： [新日期（2016,6,10）; 2，」 <DIV> <H3> 2016年7月10日</H3 > <p> 2快照</p > <UL> <利> < A HREF = 「http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/」 target =「_ blank」> 17:57:03 < /一個> < /鋰> <李> < A HREF = 「http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/」 目標= 「_空白」 > 13 ：53：41 </A > < /李> </UL > </DIV >「]，

有誰知道如何強制提示實際上解析HTML？

Answer 1

所以，我能得到這個以一種迂迴的方式工作。解決方案是在HTML響應中返回之前替換已轉義的HTML標記。我不確定這是爲什麼會起作用，但確實如此。

下面是代碼：

var scriptText = html.find("#capture-dates-calendar").text().replace(/&lt;/g, "<").replace(/&gt;/g, ">"); 
html.find("#capture-dates-calendar").text(scriptText); 

Answer 2

你有一個額外的對象{}包裝一切......？

看到以下變化，工作片段...

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('01/01/2016'), 13, '<div>test 13</div>'], 
 
     [new Date('01/02/2016'), 14, '<div>test 14</div>'], 
 
     [new Date('01/03/2016'), 15, '<div>test 15</div>'], 
 
    ]); 
 

 
    var chart = new google.visualization.Calendar(document.getElementById('capture-dates-calendar')); 
 

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

 
    chart.draw(dataTable, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="capture-dates-calendar"></div>