如何在Google Geochart图表的工具提示文本中添加新行
How do I add a new line to the tooltip text in a Google Geochart chart?
我正在使用Google的GeoChart API生成美国地图。我想根据一个值突出显示各州,但然后在悬停在州上时显示的工具提示中显示每个州的一些额外信息。我希望完成的工具提示看起来像这样:
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);
我尝试了所有这些新的线路选项,但都不起作用:<br>
、<br />
、
、

、

、
、'u000A
、'u000D
、'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}
中设置
已测试&工作将数据保存为多行CSV。
要做到这一点,请格式化多行,使其具有引号。
重要事项-您必须使用''r来表示真正的行尾字符,而不是''r''n或像正常情况一样。
例如
123,456,"this'n'is'nfour'nlines",678'r
234,567,"another'nmulti",789'r
从现在起,所有使用这些数据的谷歌公司都明白如何正确地用多行显示这些数据。
看看如何使用数据表角色。简而言之,您添加了一个角色为tooltip
的新列,然后您可以自定义显示的内容。
我以前曾成功地将其用于折线图和柱状图,但折线图和柱形图的图表库页面明确提到它们支持角色,而地理图页面则不支持。这可能并不意味着他们得不到支持;它可能只是不是一个文档化的特性。
根据我所有的研究和测试,我几乎确信目前不可能在GeoChart内的工具提示文本中添加新行。看看这个问题,我最终找到了解决方案。这并没有解决新行问题,但重新格式化了工具提示,这种方式适用于我的应用程序,可能会帮助其他人。
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- 如何在Google Geochart图表的工具提示文本中添加新行
- ExtJ将工具提示添加到网格单元格文本中
- 数组中的工具提示/悬停文本
- 使用 jQuery 设置工具提示文本
- 如果文本在高图表中较多,则工具提示无法正常工作
- 在当前工具提示文本 JQuery 旁边追加或添加新文本
- 丰富的面孔 :如何在输入数字滑块工具提示的值旁边添加静态文本
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具)添加到画布中的 Fabric JS 图像
- 是否可以创建当鼠标悬停在
标记内的文本上时出现的工具提示
- 在页面加载时自动对焦 dx文本框 并将 dx工具提示显示为验证消息
- 使用引导将斜体文本转换为工具提示
- 截断文本-鼠标悬停时在工具提示中显示全文
- q提示为每个更改特定工具提示的文本
- 如何更改拖动'n在ExtJs中放置工具提示文本
- 使用highlighter.js配置文本区域工具提示
- 平板电脑友好的悬停工具提示,显示基于javascript函数结果的动态文本
- 如何使用Javascript动态更改工具提示的文本
- Chartjs扩展甜甜圈与文本工具提示问题