Стили всплывающей подсказки Google Geochart (1.1)

0

Я использую 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

Теги:
google-visualization

2 ответа

2
Лучший ответ

1) Google не поддерживает это, однако вы можете вручную перезаписать его:

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

2) isHtml: true переопределяет вашу конфигурацию textStyle, вы должны обернуть текст в поле с классом, а затем использовать css, чтобы установить желаемый текстStyle

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/

Поделиться
  • 0
    К вашему сведению, вам не нужно переносить событие select в ready обработчик событий.
  • 0
    Спасибо за вашу помощь. И @asgallant тоже, но этот ответ был более полезным. Еще одна вещь ... вы можете изменить шрифт и цвет страны и т. Д.? Я перепробовал все.
Показать ещё 5 комментариев
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 срабатывает, когда 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/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню