如何在Google Geochart图表的工具提示文本中添加新行

How do I add a new line to the tooltip text in a Google Geochart chart?

本文关键字:文本 工具提示 添加 新行 Google Geochart      更新时间:2023-09-26

我正在使用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 />&#13;&#10&#x0A&#x0D'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 /> &#13; &#10 &#x0A &#x0D '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内的工具提示文本中添加新行。看看这个问题,我最终找到了解决方案。这并没有解决新行问题,但重新格式化了工具提示,这种方式适用于我的应用程序,可能会帮助其他人。