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

【问题标题】：How do I add a new line to the tooltip text in a Google Geochart chart?如何在 Google Geochart 图表中的工具提示文本中添加新行？
【发布时间】：2022-04-28 15:17:37
【问题描述】：

我正在使用 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, @987654336 @

对尝试的方法或实际有效的方法有什么建议吗？这在其他一些 Google 图表中似乎是可能的。

呈现的 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>

【问题讨论】：

你能用这些例子告诉我们渲染的 HTML 是什么样子吗？
我将呈现的 HTML 添加到问题中以供参考。

标签： javascript html google-visualization

【解决方案1】：

对于遇到此问题的任何人，您可以在图表选项中设置tooltip: {isHtml: true} from the docs

【讨论】：

【解决方案2】：

看看使用data table roles。简而言之，您添加一个角色为tooltip 的新列，然后您可以自定义显示的内容。

我之前已经成功地将它用于折线图和柱形图，但折线图和柱形图的chart gallery 页面明确提到它们支持角色，而地理图表页面不支持。这可能并不意味着它们不受支持。它可能只是没有记录的功能。

【讨论】：

【解决方案3】：

根据我所有的研究和测试，我几乎可以肯定目前不可能在 GeoChart 内的工具提示文本中添加新行。请参阅this question 了解我最终想出的解决方案。这并没有解决换行问题，而是以适合我的应用程序并可能对其他人有帮助的方式重新格式化了工具提示。

【讨论】：

【解决方案4】：

经过测试和工作。将数据保存为多行 CSV。

为此，请将多行格式化为带有引号。

重要提示 - 您必须将 \r 用于 real 行尾字符，而不是像平常那样使用 \r 或 \r\n。

例如

123,456,"this\n\is\nfour\nlines",678\r
234,567,"another\nmulti",789\r

从现在开始使用这些数据的所有 google 事物都了解如何正确地用多行显示它。

【讨论】：