javascript - Google Geochart (1.1) 工具提示样式

Question

我正在使用 Google 的 Geochart 并遵循此处的大量示例和选项:https://developers.google.com/chart/interactive/docs/gallery/geochart总的来说，它是成功的，但我对两件事感到好奇:

1. 是否可以定义工具提示的宽度、边框等。
2. 我正在尝试更改工具提示中的字体大小，但它似乎不起作用。
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/

谢谢，

Answer 1

1) Google 不支持此功能，但您可以手动覆盖它:

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

2) isHtml: true 覆盖您的 textStyle 配置，您应该使用类将文本包装在 span 中，然后使用 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);

完整 fiddle :http://jsfiddle.net/w5DYt/1/