Google Calendar Chart HTML Tooltip zeigt HTML-Tags als Zeichenfolge an

Question

Oben ist der Code, den ich verwende, um Google Calendar Charts in einer XQuery-Anwendung zu erstellen. Alle Daten werden korrekt angezeigt, aber ich wollte den Tooltips des Kalenders benutzerdefiniertes HTML hinzufügen. Anstatt den HTML-Code zu analysieren, werden die eigentlichen HTML-Tags als String angezeigt.

Hier ist ein Screenshot des Tooltip: https://www.flickr.com/gp/143914092@N07/M783C9

Hier ist, wie es in der Konsole aussieht: [new Date (2016,6,10), 2,‘<div> <h3> 10, Juli 2016 </h3 > <p> 2 Schnappschüssen </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 > ‚],

Wer weiß, wie Tooltips zu zwingen, um tatsächlich die HTML zu analysieren?

Answer 1

So konnte ich dies auf Umwegen zur Arbeit kommen. Die Lösung bestand darin, die maskierten HTML-Tags zu ersetzen, bevor sie in der HTML-Antwort zurückgegeben wurden. Ich bin nicht sicher, warum das funktioniert, aber es tut. Hier

ist der Code:

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

Answer 2

Sie haben ein zusätzliches Objekt {} alles verpacken ...?

siehe folgende Änderungen, Arbeits Schnipsel ...

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>