Javascript 如何在Google艺术图表的工具提示文本中添加新行?
我正在使用谷歌的地球艺术API生成美国地图。我希望基于一个值高亮显示状态,但在将鼠标悬停在状态上时显示的工具提示中显示有关每个状态的一些额外信息。我希望完成的工具提示如下所示:Javascript 如何在Google艺术图表的工具提示文本中添加新行?,javascript,html,google-visualization,Javascript,Html,Google Visualization,我正在使用谷歌的地球艺术API生成美国地图。我希望基于一个值高亮显示状态,但在将鼠标悬停在状态上时显示的工具提示中显示有关每个状态的一些额外信息。我希望完成的工具提示如下所示: Nevada Relevance: 4 ( the data driving the state highlight ) Data More Data 地图效果很好,我可以使用PatternFormat()函数将任何文本添加到工具提示中,但它会删除或忽略我尝试过的所有新行选项: var formatter = new
Nevada
Relevance: 4 ( the data driving the state highlight )
Data
More Data
地图效果很好,我可以使用PatternFormat()
函数将任何文本添加到工具提示中,但它会删除或忽略我尝试过的所有新行选项:
var formatter = new google.visualization.PatternFormat('some data\nmore data');
formatter.format(data, [0], 1);
我尝试了所有这些新线路选项,但没有一个有效:
,
,&13
,和#10
,和#x0A
,和#x0D
,\u000A
,\u000D
,\r
,\r\n
,%0A
,%0D
有什么建议可以尝试,或者什么实际有效?在其他一些谷歌图表中,这似乎是可能的
呈现的HTML如下所示
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load( 'visualization', '1', { 'packages': ['geochart'] } );
google.setOnLoadCallback( drawRegionsMap );
function drawRegionsMap()
{
var data = google.visualization.arrayToDataTable([
[ 'State', 'Relevance' ],
[ 'Arizona', 2 ],
[ 'California', 4 ],
[ 'Colorado', 1 ],
[ 'Florida', 1 ],
[ 'Georgia', 1 ],
[ 'Idaho', 1 ],
[ 'Illinois', 1 ],
[ 'Indiana', 1 ],
[ 'Iowa', 1 ],
[ 'Kansas', 1 ],
[ 'Kentucky', 1 ],
[ 'Louisiana', 1 ],
[ 'Maryland', 2 ],
[ 'Montana', 1 ],
[ 'Nevada', 2 ],
[ 'New Mexico', 2 ],
[ 'North Carolina', 1 ],
[ 'North Dakota', 1 ],
[ 'Oklahoma', 1 ],
[ 'Oregon', 1 ],
[ 'Pennsylvania', 1 ],
[ 'South Carolina', 1 ],
[ 'Tennessee', 1 ],
[ 'Texas', 1 ],
[ 'Utah', 2 ],
[ 'Washington', 1 ],
[ 'Wyoming', 1 ]
]);
data.addRows([
['Has Distributor', 1],
['Sells Direct', 1]
]);
var formatter = new google.visualization.PatternFormat('data <br> <br /> 
 
 
 \u000A \u000D \n \r \r\n %0A %0D more data');
formatter.format(data, [0], 1);
var options =
{
width: 286,
region: 'US',
resolution: 'provinces',
colorAxis: { colors: ['#abdfab', '#006600'] },
legend: 'none'
};
var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
chart.draw( data, options );
};
</script>
<div id="chart_div" style="width: 286px; height: 180px;"></div>
load('visualization','1',{'packages':['geograpart']});
setOnLoadCallback(DrawRegionMap);
函数drawRegionsMap()
{
var data=google.visualization.arrayToDataTable([
[“状态”、“相关性”],
[‘亚利桑那’,2],
[California',4],
[‘科罗拉多’,1],
[“佛罗里达”,1],
[“格鲁吉亚”,1],
[‘爱达荷’,1],
[“伊利诺伊州”,1],
[“印第安纳”,1],
[Iowa',1],
[“堪萨斯州”,1],
[“肯塔基州”,1],
[“路易斯安那州”,1],
[“马里兰”,2],
[“蒙大拿”,1],
[“内华达”,2],
[“新墨西哥”,2],
[‘北卡罗来纳’,1],
[“北达科他州”,1],
[“俄克拉荷马州”,1],
[“俄勒冈州”,1],
[“宾夕法尼亚”,1],
[“南卡罗来纳州”,1],
[‘田纳西’,1],
[‘德克萨斯’,1],
[‘犹他’,2],
[“华盛顿”,1],
[“怀俄明州”,1]
]);
data.addRows([
['Has Distributor',1],
[“直接销售”,1]
]);
var formatter=new google.visualization.PatternFormat('data
;
\u000A\u000D\n\r\n%0A%0D更多数据');
格式(数据[0],1);
var期权=
{
宽度:286,
地区:"美国",,
决议:“各省”,
颜色轴:{colors:['#abdfab','#006600']},
图例:“无”
};
var chart=new google.visualization.geograpart(document.getElementById('chart_div'));
图表绘制(数据、选项);
};
看看如何使用。简言之,您可以添加一个新列,其角色为工具提示
,然后可以自定义显示的内容
我以前在折线图和柱状图中成功地使用过这个功能,但是折线图和柱状图的页面明确提到它们支持角色,而地理图表页面则不支持。这可能并不意味着他们得不到支持;它可能不是一个文档化的功能。看看如何使用它。简言之,您可以添加一个新列,其角色为工具提示
,然后可以自定义显示的内容
我以前在折线图和柱状图中成功地使用过这个功能,但是折线图和柱状图的页面明确提到它们支持角色,而地理图表页面则不支持。这可能并不意味着他们得不到支持;它可能只是一个没有文档记录的功能。从我所有的研究和测试中,我几乎可以肯定,目前不可能在地图中的工具提示文本中添加新行。看看我最终想出的解决办法。这并没有解决新行问题,但以一种对我的应用程序有效并可能帮助他人的方式重新格式化了工具提示。从我所有的研究和测试中,我几乎可以肯定,目前不可能在地图中向工具提示文本添加新行。。看看我最终想出的解决办法。这并没有解决新行问题,但以一种对我的应用程序有效并可能帮助他人的方式重新格式化了工具提示。对于遇到此问题的任何人,您可以在图表选项工具提示中设置:{isHtml:true}
from对于遇到此问题的任何人,您可以在图表选项工具提示中设置:{isHtml:true}
from您能告诉我们这些示例中呈现的HTML是什么样子吗?我将呈现的HTML添加到问题中以供参考。您能告诉我们这些示例中呈现的HTML是什么样子吗?我将呈现的HTML添加到问题中以供参考。