Google Geochart（1.1）工具提示样式

Question

我正在使用Google的Geochart，并在此处跟踪了许多示例和选项： https ： //developers.google.com/chart/interactive/docs/gallery/geochart ，通常它已经成功了，但是我对两件事感到很好奇：

1. 是否可以定义tooltip的宽度，边框等。
2. 我正在尝试更改tooltip的字体大小，但似乎不起作用。
3. 您可以将悬停状态更改为单击状态，还是更好，如果您单击某个国家/地区，会发生什么情况吗？ 带您到其他页面等

我正在使用1.1版，因为它允许在工具提示中使用HTML，但是我在任何地方都找不到此文档。

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
        ['United Kingdom', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.'],
        ['United States', 2, 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.'],
        ['China', 2, 'Hello China'],
        ['Brazil', 2, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']
    ]);
    var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        legend: 'none',
        tooltip: {
            isHtml: true,
            textStyle: { 
                fontSize: 21 
            }
        },
        colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
    };
    var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
    chart.draw(data, options);
}

<div id="chart-canvas" style="height:500px;"></div>

为了我们的理智，我建立了一个jsFiddle http://jsfiddle.net/w5DYt/

谢谢，R

Answer 1

1）Google不支持此功能，但是您可以手动覆盖它：

.google-visualization-tooltip{
    width:100px !important;
    border: 2px solid red !important;
} 

2） isHtml: true覆盖您的textStyle配置，您应该使用一个类将文本包装在一个范围内，然后使用CSS设置所需的textStyle

3）Google不支持点击处理程序，但是有一个选择项。 您可以执行以下操作：

var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));

function ready(){
    google.visualization.events.addListener(chart, 'select', handler);
    function handler(){
        var selection=chart.getSelection();
        if(selection.length==1){
            console.log(data.getValue(selection[0].row,2))
        }
    }        
}

google.visualization.events.addListener(chart, 'ready', ready);

chart.draw(data, options);

完整的提琴： http : //jsfiddle.net/w5DYt/1/

Answer 2

您可以将工具提示内容包装在div中，然后使用类（或内联样式）对其进行样式设置：

[javascript]

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Coverage', {role: 'tooltip', p:{html:true}}],
        ['United Kingdom', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>'],
        ['United States', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>'],
        ['China', 2, '<div class="tooltip">Hello China</div>'],
        ['Brazil', 2, '<div class="tooltip">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>']
    ]);
    var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        legend: 'none',
        tooltip: {
            isHtml: true,
            textStyle: { 
                fontSize: 21 
            }
        },
        colorAxis: {colors: ['#F1F1F1', '#4CBCBF']} // grey to cyan
    };
    var chart = new google.visualization.GeoChart(document.getElementById('chart-canvas'));
    chart.draw(data, options);
}

[CSS]

.tooltip {
    width: 200px;
    min-height: 50px;
}

您可以使用两个事件来捕获点击： select和regionClick 。 当用户单击有数据的区域（在您的示例中为英国，美国，中国，巴西）时， select （如juvian所示）有效； 单击任何区域时，即使该区域不在您的数据集中，也将触发regionClick ，并返回一个具有region属性的对象，该对象保存该region的ISO代码：

google.visualization.events.addListener(chart, 'regionClick', function (e) {
    // e.region contains the ISO code for the clicked region
});

http://jsfiddle.net/asgallant/w5DYt/3/