我能否自定义谷歌地理图表中的工具提示文本？

Question

以下是我正在使用的代码，基于我在Google文档中找到的教程，但我不确定它是否适用于Geochart，我是否做得正确，或者是否有其他方法来为Geochart实现它。

如果我不包括提示列，这段代码就可以正常工作。但是当我包括提示列时，我会收到错误消息"Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)"，它显示在应该出现Geochart的位置。

这个问题解决了相同的问题，但没有特别针对Geochart。

<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', {type: 'string', role: 'tooltip'} ],
            [ 'Alabama', 3, 'tooltip test text' ],
            [ 'Arizona', 1, 'tooltip test text' ],
        ]);

        var options =
        {
            region:         'US',
            resolution:     'provinces',
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>

- T. Brian Jones

Answer 1

为了自定义工具提示以使用包括换行/图像在内的HTML，请查看此示例： http://jsfiddle.net/SD4KA/

    google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world<br>test'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
            isHtml: true
        }
    });
}

自v1.1版本开始，地理图表支持HTML工具提示。

- Radu

Answer 2

我能够通过以下方式在工具提示中包含所需的文本，包括其值：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([

    [{v:"US",f:"United States of America"},1,"21% of Visits"],

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"],

    [{v:"DE",f:"Germany"},3,"6% of visits"],

    [{v:"FR",f:"France"},4,"5% of visits"],

    [{v:"ES",f:"Spain"},5,"5% of visits"],

    [{v:"CA",f:"Canada"},6,"4% of visits"],

    [{v:"IT",f:"Italy"},7,"4% of visits"],

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"],

    [{v:"BR",f:"Brazil"},9,"4% of visits"],

    [{v:"TR",f:"Turkey"},10,"3% of visits"],

    [{v:"IN",f:"India"},11,"3% of visits"],

    [{v:"RU",f:"Russia"},12,"3% of visits"],

    [{v:"AU",f:"Australia"},13,"2% of visits"],

]);

这样的话，例如"美利坚合众国"将成为工具提示的第一行，而"21％的访问量"将成为第二行。采用这种格式，我可以在工具提示中包含任何我想要的文本，并分两行显示。

- CMoreira

---

你好，有没有可能显示同一个国家的两个结果？例如，对于英国，我可以采取以下结果：[{v：“GB”，f：“大不列颠南部”}，12，“访问量的3％”]，如果我悬停在该国南部，并且再次显示gb的结果，如果我悬停在该国北部，则会出现以下结果：[{v：“GB”，f：“大不列颠北部”}，12，“访问量的13％”]？ - Pavlen

Pavlen，在查看世界地图或欧洲地图时，这是不可能的。当分辨率设置为国家时，API不允许您分解国家。替代方案是使用标记，这样您可以在北部和南部绘制标记，或者使用选项region:'GB'仅显示GB和'resolution:provinces'来分解GB，但这仍然有限制。 - CMoreira

Answer 3

这个主题提供了三种选择：

• 手动设置数据点的格式化值（使用#setFormattedValue() DataTable 方法）
• 在 DataTable 列上使用其中一个 格式化器
• 在 DataTable 中包含 '工具提示' 角色列

我个人使用了第一种方法，对于你的示例应该是这样的

var data = google.visualization.arrayToDataTable([
    [ 'State', 'Relevance' ],
    [ 'Alabama', { v: 3, f: 'tooltip test text' } ],
    [ 'Arizona', { v: 1, f: 'tooltip test text' } ],
]);

- fglez

---

你有没有想过如何在工具提示中添加新行？我已经尝试了通常的\n \r <br /> <br>等方法。 - T. Brian Jones

我无法在格式文本中添加换行符或HTML :( - fglez

我一直无法让它工作。我也使用arrayToDataTable来获取我的数据集，但这种方法对我不起作用。 - mavili

Answer 4

我遇到了类似的散点图问题。我必须使用 arrayToDataTable 将数据传递给图表，而不是像其他答案中建议的使用 DataTable() 和 addColumn()。

为了让它正常工作，您需要像您目前正在执行的那样调用 arrrayToDataTable() 并将其保存到变量数据中。

然后，您需要指定要作为提示工具处理的列（您还必须指定应绘制哪些列）。在下面的示例中，第0列和第1列包含绘图数据，第2列包含提示字符串。

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]);

最后，您必须使用视图变量而不是数据变量进行调用绘制：

chart.draw(view, options);

- meirmsn

---

你能将工具提示渲染为带有换行符/图片的HTML吗？谢谢 - Radu

Answer 5

看起来使用GeoChart工具无法按照我尝试的方式格式化文本。下面是我最终想出的解决方案和渲染地图：

带提示视图的渲染地图

PHP和JavaScript代码

<!-- generate geo map -->
<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()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            <?php echo $data_table; ?>
        ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          <?php echo $width; ?>,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div>

渲染的 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()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            [ 'State', 'in', 'String' ],
            [ 'Arizona', 2, 'Has Facility, Sells Direct' ],
            [ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ],
            [ 'Colorado', 1, 'Sells Direct' ],
            [ 'Florida', 1, 'Has Distributor' ],
            [ 'Georgia', 1, 'Has Distributor' ],
            [ 'Idaho', 1, 'Sells Direct' ],
            [ 'Illinois', 1, 'Has Distributor' ],
            [ 'Indiana', 1, 'Has Distributor' ],
            [ 'Iowa', 1, 'Has Distributor' ],
            [ 'Kansas', 1, 'Has Distributor' ],
            [ 'Kentucky', 1, 'Has Distributor' ],
            [ 'Louisiana', 1, 'Has Distributor' ],
            [ 'Maryland', 2, 'Has Distributor' ],
            [ 'Montana', 1, 'Sells Direct' ],
            [ 'Nevada', 2, 'Has Facility, Sells Direct' ],
            [ 'New Mexico', 2, 'Has Facility, Sells Direct' ],
            [ 'North Carolina', 1, 'Has Distributor' ],
            [ 'North Dakota', 1, 'Has Distributor' ],
            [ 'Oklahoma', 1, 'Sells Direct' ],
            [ 'Oregon', 1, 'Sells Direct' ],
            [ 'Pennsylvania', 1, 'Has Distributor' ],
            [ 'South Carolina', 1, 'Has Distributor' ],
            [ 'Tennessee', 1, 'Has Distributor' ],
            [ 'Texas', 1, 'Has Distributor' ],
            [ 'Utah', 2, 'Has Facility, Sells Direct' ],
            [ 'Washington', 1, 'Sells Direct' ],
            [ 'Wyoming', 1, 'Sells Direct' ],       ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          286,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: 286px; height: 180px;"></div>

- T. Brian Jones