国家名称未在geochart上显示

Question

这是我的代码

 <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']}); google.setOnLoadCallback(drawVisualization); function drawVisualization() { var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0'); // query.setQuery('select A,B,C'); query.send(handleQueryResponseTR); } function handleQueryResponseTR(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var options = { backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, colorAxis: {colors: ['#D95F0E','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FFF7BC','#FFF7BC','#FFF7BC','#FFF7BC',]}, backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, datalessRegionColor: '#F5F0E7', displayMode: 'regions', enableRegionInteractivity: 'true', resolution: 'countries', sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, region:'world', keepAspectRatio: true, width:800, height:600, tooltip: {isHtml:'true',textStyle: {color: '#444444'}, trigger:'focus'} }; var data = response.getDataTable(); var view = new google.visualization.DataView(data); view.setColumns([0,{ type:'string', label : 'num of', calc: function (dt, row) { return { v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1) + ': (' + dt.getFormattedValue(row, 2) + ' .)' } } }]); var chart = new google.visualization.GeoChart(document.getElementById('visualization')); chart.draw(view, options); } </script> <div id='visualization'></div> 

和此处的电子表格https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0

我不知道为什么第一列中的国家/地区名称不会显示在地理图上，以及如何自定义工具提示，例如..添加换行符而不是冒号（:)，所以我尝试了br /，但没有用

有人可以帮忙吗？

谢谢

Answer 1

在计算的视图字段中添加了以下属性...

role: 'tooltip',
p: {html: true}

请参阅以下工作片段...

 google.charts.load('current', { callback: drawVisualization, packages:['geochart'] }); function drawVisualization() { var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0'); query.send(handleQueryResponseTR); } function handleQueryResponseTR(response) { if (response.isError()) { console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var options = { backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, colorAxis: {colors: ['#D95F0E','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FFF7BC','#FFF7BC','#FFF7BC','#FFF7BC',]}, backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, datalessRegionColor: '#F5F0E7', displayMode: 'regions', enableRegionInteractivity: 'true', resolution: 'countries', sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, region:'world', keepAspectRatio: true, width:800, height:600, tooltip: {isHtml:'true',textStyle: {color: '#444444'}, trigger:'focus'} }; var data = response.getDataTable(); var view = new google.visualization.DataView(data); view.setColumns([0, { type:'string', label : 'num of', calc: function (dt, row) { return dt.getFormattedValue(row, 1) + ': (' + dt.getFormattedValue(row, 2) + ' .)' }, role: 'tooltip', p: {html: true} }]); var chart = new google.visualization.GeoChart(document.getElementById('visualization')); chart.draw(view, options); } 

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