Google GeoCharts：如何删除自定义 HTML 工具提示中的标题？

Question

I have a Google GeoChart with custom HTML tooltip.
All is fine except that tooltip title won't go away

 google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ [ {label: 'Country', type: 'string'}, {label: 'Popularity', type: 'number'}, {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}} ], ['Germany', 200, makeTooltip('Germany', 200)], ['United States', 300, makeTooltip('USA', 300)], ['Brazil', 400, makeTooltip('Brazil', 400)], ['Canada', 500, makeTooltip('Canada', 500)], ['France', 600, makeTooltip('France', 600)], ['RU', 700, makeTooltip('Russia', 700)] ]); var options = { legend: 'none', tooltip: {isHtml: true} }; function makeTooltip(label, value){ return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>'; } var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div"></div>

The same configuration with a Bar Chart works perfectly

 google.charts.load('current', { 'packages': ['corechart'], 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ [ {label: 'Country', type: 'string'}, {label: 'Popularity', type: 'number'}, {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}} ], ['Germany', 200, makeTooltip('Germany', 200)], ['United States', 300, makeTooltip('USA', 300)], ['Brazil', 400, makeTooltip('Brazil', 400)], ['Canada', 500, makeTooltip('Canada', 500)], ['France', 600, makeTooltip('France', 600)], ['RU', 700, makeTooltip('Russia', 700)] ]); var options = { legend: 'none', tooltip: {isHtml: true} }; function makeTooltip(label, value){ return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>'; } var chart = new google.visualization.ColumnChart(document.getElementById('regions_div')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div"></div>

What am I missing? An answer to my similar problem suggest to add showTitle: false , but it does not work... Should I really deal with CSS to hide the title? Thanks

Answer 1

it's an issue specific to GeoChart.

you can remove by using object notation on the first column.
provide the value, and a blank formatted value.

{v: 'Germany', f: ''}

see following working snippet...

 google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ [ {label: 'Country', type: 'string'}, {label: 'Popularity', type: 'number'}, {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}} ], [{v: 'Germany', f: ''}, 200, makeTooltip('Germany', 200)], [{v: 'United States', f: ''}, 300, makeTooltip('USA', 300)], [{v: 'Brazil', f: ''}, 400, makeTooltip('Brazil', 400)], [{v: 'Canada', f: ''}, 500, makeTooltip('Canada', 500)], [{v: 'France', f: ''}, 600, makeTooltip('France', 600)], [{v: 'RU', f: ''}, 700, makeTooltip('Russia', 700)] ]); var options = { legend: 'none', tooltip: {isHtml: true, trigger: 'both'} }; function makeTooltip(label, value){ return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>'; } var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div"></div>