国名不会显示在geochart上

本文介绍了国名不会显示在geochart上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的代码

< script type ='text / javascript'src ='http：//www.google.com/jsapi'>< / script>< script type ='text / javascript'> google.load（'visualization'，'1'，{'包'：['geochart']}）; google.setOnLoadCallback（drawVisualization）;函数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）; }）;}函数handleQueryResponseTR（response）{if（response.isError（））{alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;返回; } 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'，解析：'countries'，sizeAxis： {minValue：1，maxValue：1，minSize：10，maxSize：10}，region：'world'，keepAspectRatio：true，width：800，height：600，tooltip：{isHtml：'true'，textStyle：{color： '＃444444'}，触发：'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 ，1）+'：（'+ dt.getFormattedValue（row，2）+'。）'}}}]）; var chart = new google.visualization.GeoChart（document.getElementById（'visualization'））; chart.draw（view，options）; }< / script> < div id ='visualization'>< / div>

和电子表格

我不知道为什么第一列中的国名不显示在geochart $ b上$ b以及如何自定义工具提示，比如..添加换行符而不是冒号（:)我试过br /但它没有工作

任何人都可以帮助？

谢谢

解决方案

将以下属性添加到计算视图字段...

pre $ 角色：'tooltip'， p：{html：true} code>

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

 
 
  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'）; （）函数handleQueryResponseTR（响应）{if（response.isError（））{console.log（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;返回; } 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'，解析：'countries'，sizeAxis： {minValue：1，maxValue：1，minSize：10，maxSize：10}，region：'world'，keepAspectRatio：true，width：800，height：600，tooltip：{isHtml：'true'，textStyle：{color： '＃444444'}，触发：'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 ，2）+'。）'}，角色：'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>

 
This is my code 
<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>
and the spreadsheet here https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0
I don't know why the country name in the first column not show on the geochartand how can I customize the tooltips such as.. add line break instead of colon(:) I tried br / but it didn't work
anyone can help ?
Thanks 
 解决方案 
added the following properties to the calculated view field...  
role: 'tooltip',
p: {html: true}
see following working snippet...  
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>
                        这篇关于国名不会显示在geochart上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！