Question

我正在使用谷歌的Geochart，并在此处遵循一系列示例和选项：https://developers.google.com/chart/interactive/docs/gallery/geochart并且通常它已经成功，但我对两件事感到好奇：

是否可以定义tooltip。
我正在尝试更改tooltip中的字体大小，但它似乎无法正常工作。
您是否可以将悬停状态更改为点击状态，或者更好的是，如果您点击某个国家/地区，您是否可以拥有它？带您到另一页等。

我使用的是版本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属性的对象，该对象包含该区域的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/

Google Geochart（1.1）工具提示样式

2 个答案: