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/