Google Geochart(1.1)工具提示样式

Google Geochart (1.1) tooltip styles

本文关键字：工具提示 样式 Google Geochart      更新时间：2023-09-26

我正在使用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

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/

您可以将工具提示内容包装在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/

相关文章：