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


Google Calendar Chart HTML Tooltip displays HTML tags as string

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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);
 }}

上面是我在XQuery应用程序中创建谷歌日历图表时使用的代码。所有数据都显示正确，但我想将自定义HTML添加到日历工具提示中。实际的HTML标记不是解析HTML，而是显示为字符串。

以下是工具提示的截图：https://www.flickr.com/gp/143914092@n07/m783c9

以下是控制台中的外观：[新日期(2016,6,10)，2，'Jul 10，2016

2张快照

  • 17:57∶03
  • 13:53:41

’

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

相关讨论

你有一个额外的东西包着所有的东西…？

请参阅以下更改、工作代码段…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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, 'test 13'],
      [new Date('01/02/2016'), 14, 'test 14'],
      [new Date('01/03/2016'), 15, 'test 15'],
   ]);

   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);
}
1
<script src="https://www.gstatic.com/charts/loader.js">

号

相关讨论

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

代码如下：

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