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> 

Выше приведен код, который я использую для создания графиков Google Calendar в приложении XQuery. Все данные отображаются правильно, но я хотел добавить пользовательский HTML в подсказки календаря. Вместо синтаксического анализа HTML фактические теги HTML отображаются в виде строки.

Вот скриншот подсказки: https://www.flickr.com/gp/143914092@N07/M783C9

Вот как это выглядит в консоли: [новая дата (2016,6,10), 2,»< < ДИВА > > h3 10 июля 2016 </h3 > < р > 2 моментальные снимки </р > < < ул > > Li < A HREF = "http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target = "_ blank" > 17:57:03 </д > </Li > < <Li> A HREF = "http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" целевых = "_blank" > 13 : 53: 41 </а > </li > </уль > </дел > «],

кто-нибудь знает, как заставить всплывающие подсказки на самом деле разобрать 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>