[英]How do I change a tooltip font in Google Visualization API GeoChart
[英]How do I add a new line to the tooltip text in a Google Geochart chart?
我正在使用 Google 的 GeoChart API 生成美国的 map。 我想根据一个值突出显示状态,然后在工具提示中显示有关每个 state 的一些额外信息,当您在 state 上显示 hover 时。我希望完成的工具提示看起来像这样:
Nevada
Relevance: 4 ( the data driving the state highlight )
Data
More Data
map 效果很好,我可以使用PatternFormat()
function 在工具提示中添加我想要的任何文本,但它会删除或忽略我尝试过的所有新行选项:
var formatter = new google.visualization.PatternFormat('some data\nmore data');
formatter.format(data, [0], 1);
我已经尝试了所有这些换行选项,但没有一个有效: <br>
、 <br />
、
, 

, 

, 
, ,
,
\n
, \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>
对于遇到此问题的任何人,您都可以在文档中的图表选项tooltip: {isHtml: true}
从我的所有研究和测试中,我几乎可以肯定, 目前不可能在GeoChart中的工具提示文本中添加新行 。 请参阅此问题以获取我最终想到的解决方案。 这并不能解决新的换行问题,而是以一种对我的应用程序有用并且可以帮助其他人的方式重新格式化了工具提示。
测试和工作。 将数据保存为多行 CSV。
为此,请格式化多行以包含引号。
重要 - 您必须使用 \r 作为真正的行尾字符,而不是像平常那样使用 \r 或 \r\n。
例如
123,456,"this\n\is\nfour\nlines",678\r
234,567,"another\nmulti",789\r
从现在开始,所有使用此数据的谷歌事物都知道如何正确地用多行显示它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.