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，'＆lt; div＆gt;＆lt; h3＆gt; 2016年7月10日＆lt; / h3＆gt;＆lt; p＆gt; 2个快照＆lt; / p＆gt;＆lt; ul＆gt;＆lt; li＆gt;＆lt; a href =“http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/"target =”_ blank“＆gt; 17：57：03＆lt; / a＆gt;＆lt; / li＆gt;＆lt; li＆gt;＆lt; a href =“http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/"target =”_ blank“＆gt; 13:53： 41 LT; / A＆GT;＆LT; /立GT;＆LT; / UL＆GT;＆LT; / DIV＆GT;']，

有谁知道如何强制工具提示实际解析HTML？

Answer 1

你有一个额外的对象{}包装一切......？

请参阅以下更改，工作代码段...

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>

Answer 2

所以，我能够以迂回的方式让它工作。解决方案是在HTML响应中返回之前替换转义的HTML标记。我不确定为什么会这样，但确实如此。

以下是代码：

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

Google日历图表HTML工具提示将HTML标记显示为字符串

2 个答案: