GoogleカレンダーチャートHTMLツールチップは、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カレンダーチャートを作成するために使用しているコードです。すべてのデータが正しく表示されていますが、カスタムHTMLをカレンダーのツールチップに追加したかったのです。 HTMLを解析する代わりに、実際のHTMLタグが文字列として表示されます。ここで

は、ツールチップのスクリーンショットです：https://www.flickr.com/gp/143914092@N07/M783C9

ここでは、コンソールでどのように見えるかです：<のdiv > <H3> 2016年7月10日<は「、 [新しいDate（2016,6,10）、2/H3 > <P> 2スナップショット</P > <UL> <リチウム> < HREF = "http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target = "_ blank" > 17:57:03 </> < /リチウム> <リチウム> < HREF = "http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" ターゲット= "_ブランク" > 13 ：53：41 </> < /李> </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>