GeoChart Google 样式标记

Question

I'm trying to make the tooltip only with the name of the country

As you can see, the tooltip has a white space beneath him. I'm using the following code.

 google.charts.load('42', {'packages':['geochart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Lat'); data.addColumn('number', 'Lon'); data.addColumn('string', 'Country'); data.addColumn('number', 'value'); data.addColumn({type:'string', role:'tooltip'}); var img_urls = { 'Colombia':"https://i.ibb.co/4PMF2Jh/MAPAS-CO.png", 'Argentina':"https://i.ibb.co/dtYqm6Q/MAPAS-AR.png", 'Lesotho':"https://i.ibb.co/yF2w9FS/MAPAS-LS.png", 'Eswatini':"https://i.ibb.co/0m0hKrm/MAPAS-ESWATINI-06.png", 'Uganda':"https://i.ibb.co/k67BkDz/MAPAS-UG.png", 'Botswana':"https://i.ibb.co/qmg2cw3/MAPAS-BW.png", 'Angola':"https://i.ibb.co/LPtm8VJ/MAPAS-AO.png", 'Romania':"https://i.ibb.co/hH29SnL/MAPAS-RO.png", 'Tanzania':"https://i.ibb.co/jyKLbLn/MAPAS-TZ.png", 'Malawi':"https://i.ibb.co/pn32frh/MAPAS-MW.png" } // var ivalue = new Array(); data.addRows([[4.711,-74.0721,'Colombia',0,'']]); // data.addRows([[4.711,-74.0721,'Colombia']]); // data.addRows([[4.711,-74.0721,'Colombia']]); // ivalue['4.711'] = ''; data.addRows([[-34.6037,-58.3816,'Argentina',1,'']]); // data.addRows([[-34.6037,-58.3816,'Argentina']]); // ivalue['-34.6037'] = ''; data.addRows([[-29.61,28.2336,'Lesotho',2,'']]); // data.addRows([[-29.61,28.2336,'Lesotho']]); // ivalue['-29.61'] = ''; data.addRows([[-22.3285,24.6849,'Botswana',3,'']]); // data.addRows([[-22.3285,24.6849,'Botswana']]); // ivalue['-22.3285'] = ''; data.addRows([[-26.5225,31.4659,'Eswatini',4,'']]); // data.addRows([[-26.5225,31.4659,'Eswatini']]); // ivalue['-26.5225'] = ''; data.addRows([[1.3733,32.2903,'Uganda',5,'']]); // data.addRows([[1.3733,32.2903,'Uganda']]); // ivalue['1.3733'] = ''; data.addRows([[-11.2027,17.8739,'Angola',6,'']]); // data.addRows([[-11.2027,17.8739,'Angola']]); // ivalue['-11.2027'] = ''; data.addRows([[-13.2543,34.3015,'Malawi',7,'']]); // data.addRows([[-13.2543,34.3015,'Malawi']]); // ivalue['-13.2543'] = ''; data.addRows([[-6.369,34.8888,'Tanzania',8,'']]); // data.addRows([[-6.369,34.8888,'Tanzania']]); // ivalue['-6.369'] = ''; data.addRows([[45.9432,24.9668,'Romania',9,'']]); // data.addRows([[45.9432,24.9668,'Romania']]); // ivalue['45.9432'] = ''; var options = { backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF',strokeWidth:0 }, colorAxis: {minValue: 0, maxValue: 9, colors: ['#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC']}, legend: 'none', datalessRegionColor: '#f5f5f5', displayMode: 'markers', enableRegionInteractivity: 'true', resolution: 'countries', sizeAxis: {minValue: 1, maxValue:1, minSize:5, maxSize: 5}, region:'world', keepAspectRatio: true, width:600, height:400, tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false} }; var chart = new google.visualization.GeoChart(document.getElementById('map')); var modal = document.getElementById("myModal"); var modalImg = document.getElementById("img01"); var span = document.getElementById("close"); google.visualization.events.addListener(chart, 'select', function(){ var selection = chart.getSelection(); var value = data.getValue(selection[0].row, 2); console.log(value); modal.style.display = "block"; modalImg.src = img_urls[value]; console.log(modalImg.src) modalImg.style.width = 'auto'; modalImg.style.height = '70%'; }) span.onclick = function(){ modal.style.display = "none"; } modal.onclick = function(){ modal.style.display = "none"; } chart.draw(data, options); }

 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(255, 255, 255); /* Fallback color */ background-color: rgba(255, 255, 255, 0.349); /* Black w/ opacity */ } /* Modal Content (Image) */.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){.modal-content { width: 100%; } }

 <:DOCTYPE html> <html lang="en"> <head> <script type='text/javascript' src='https.//www.gstatic.com/charts/loader:js'></script> <script type='text/javascript' src='https.//www.google.com/jsapi'></script> <script src="mapa_prueba.js"></script> <link rel="stylesheet" href="mapa,css"> </head> <body> <div id='map'></div> <div id="myModal" class="modal"> <;-- The Close Button --> <span class="close", id="close">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> </div> </body> </html>

The thing is that I want the tooltip to be only the name of the country.

Answer 1

Right now since your tooltip has an option ishtml: false , the SVG Path generated is dynamic. You can make use of ishtml: true . It is aligned by default and it is easier to manipulate HTML by CSS.

For example, if you want to manipulate the margin, you can use this selector: .google-visualization-tooltip {} and maybe the inner ul and li as well.

You can edit your font style using this:

.google-visualization-tooltip-item span { font-family: cursive !important; }

!important is needed to overwrite the inline style generated: https://specifishity.com/

 google.charts.load('42', { 'packages': ['geochart'] }); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Lat'); data.addColumn('number', 'Lon'); data.addColumn('string', 'Country'); data.addColumn('number', 'value'); data.addColumn({ type: 'string', role: 'tooltip' }); var img_urls = { 'Colombia': "https://i.ibb.co/4PMF2Jh/MAPAS-CO.png", 'Argentina': "https://i.ibb.co/dtYqm6Q/MAPAS-AR.png", 'Lesotho': "https://i.ibb.co/yF2w9FS/MAPAS-LS.png", 'Eswatini': "https://i.ibb.co/0m0hKrm/MAPAS-ESWATINI-06.png", 'Uganda': "https://i.ibb.co/k67BkDz/MAPAS-UG.png", 'Botswana': "https://i.ibb.co/qmg2cw3/MAPAS-BW.png", 'Angola': "https://i.ibb.co/LPtm8VJ/MAPAS-AO.png", 'Romania': "https://i.ibb.co/hH29SnL/MAPAS-RO.png", 'Tanzania': "https://i.ibb.co/jyKLbLn/MAPAS-TZ.png", 'Malawi': "https://i.ibb.co/pn32frh/MAPAS-MW.png" } // var ivalue = new Array(); data.addRows([ [4.711, -74.0721, 'Colombia', 0, ''] ]); // data.addRows([[4.711,-74.0721,'Colombia']]); // data.addRows([[4.711,-74.0721,'Colombia']]); // ivalue['4.711'] = ''; data.addRows([ [-34.6037, -58.3816, 'Argentina', 1, ''] ]); // data.addRows([[-34.6037,-58.3816,'Argentina']]); // ivalue['-34.6037'] = ''; data.addRows([ [-29.61, 28.2336, 'Lesotho', 2, ''] ]); // data.addRows([[-29.61,28.2336,'Lesotho']]); // ivalue['-29.61'] = ''; data.addRows([ [-22.3285, 24.6849, 'Botswana', 3, ''] ]); // data.addRows([[-22.3285,24.6849,'Botswana']]); // ivalue['-22.3285'] = ''; data.addRows([ [-26.5225, 31.4659, 'Eswatini', 4, ''] ]); // data.addRows([[-26.5225,31.4659,'Eswatini']]); // ivalue['-26.5225'] = ''; data.addRows([ [1.3733, 32.2903, 'Uganda', 5, ''] ]); // data.addRows([[1.3733,32.2903,'Uganda']]); // ivalue['1.3733'] = ''; data.addRows([ [-11.2027, 17.8739, 'Angola', 6, ''] ]); // data.addRows([[-11.2027,17.8739,'Angola']]); // ivalue['-11.2027'] = ''; data.addRows([ [-13.2543, 34.3015, 'Malawi', 7, ''] ]); // data.addRows([[-13.2543,34.3015,'Malawi']]); // ivalue['-13.2543'] = ''; data.addRows([ [-6.369, 34.8888, 'Tanzania', 8, ''] ]); // data.addRows([[-6.369,34.8888,'Tanzania']]); // ivalue['-6.369'] = ''; data.addRows([ [45.9432, 24.9668, 'Romania', 9, ''] ]); // data.addRows([[45.9432,24.9668,'Romania']]); // ivalue['45.9432'] = ''; var options = { backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 }, colorAxis: { minValue: 0, maxValue: 9, colors: ['#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC', '#6699CC'] }, legend: 'none', datalessRegionColor: '#f5f5f5', displayMode: 'markers', enableRegionInteractivity: 'true', resolution: 'countries', sizeAxis: { minValue: 1, maxValue: 1, minSize: 5, maxSize: 5 }, region: 'world', keepAspectRatio: true, width: 600, height: 400, tooltip: { textStyle: { color: '#444444' }, trigger: 'focus', isHtml: true } }; var chart = new google.visualization.GeoChart(document.getElementById('map')); var modal = document.getElementById("myModal"); var modalImg = document.getElementById("img01"); var span = document.getElementById("close"); google.visualization.events.addListener(chart, 'select', function() { var selection = chart.getSelection(); var value = data.getValue(selection[0].row, 2); console.log(value); modal.style.display = "block"; modalImg.src = img_urls[value]; console.log(modalImg.src) modalImg.style.width = 'auto'; modalImg.style.height = '70%'; }) span.onclick = function() { modal.style.display = "none"; } modal.onclick = function() { modal.style.display = "none"; } chart.draw(data, options); }

 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(255, 255, 255); /* Fallback color */ background-color: rgba(255, 255, 255, 0.349); /* Black w/ opacity */ } /* Modal Content (Image) */.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) {.modal-content { width: 100%; } }.google-visualization-tooltip-item span { font-family: cursive;important; }

 <:DOCTYPE html> <html lang="en"> <head> <script type='text/javascript' src='https.//www.gstatic.com/charts/loader:js'></script> <script type='text/javascript' src='https.//www.google.com/jsapi'></script> <script src="mapa_prueba.js"></script> <link rel="stylesheet" href="mapa,css"> </head> <body> <div id='map'></div> <div id="myModal" class="modal"> <;-- The Close Button --> <span class="close" , id="close">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> </div> </body> </html>