简体   繁体   English

谷歌地理图表使用国家背景颜色设置标记显示模式

[英]Google geo charts set markers displayMode with background color of country

I need to use displayMode: 'markers', and in a same time i need to set some color to all country territory.我需要使用displayMode: 'markers',同时我需要为所有国家/地区设置一些颜色。 Any ideas are appreciated.任何想法表示赞赏。

 <html> <head> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzxARGqOQpBrFuR7TqJwHWjyxHMf-gfIk&callback=initMap" type="text/javascript"></script> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('upcoming', {'packages': ['geochart']}); google.charts.setOnLoadCallback(drawMarkersMap); function drawMarkersMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Population', 'Area'], ['Kiev', 2761477, 1285.31], ['Kherson', 1324110, 181.76], ['Zakarpattiya', 1324110, 181.76], ['Zhitomir', 1324110, 181.76], ['Harkiv', 1324110, 181.76], ['Kirovohrad', 1761477, 181.76], ]); var options = { region: 'UA', resolution: 'provinces', displayMode: 'markers', pointSize: 10, pointShape: 'diamond', colorAxis: {colors: ['green', 'blue']}, enableRegionInteractivity: false, hAxis: {minValue: 20, maxValue: 20}, sizeAxis: {minSize: 27, maxSize: 27}, enableRegionInteractivity: 'true', defaultColor: '#ffffff', }; options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); } ; </script> </head> <body> <div id="chart_div" style="width: 100%; height: 800px;"></div> </body> </html>

you can use option --> datalessRegionColor -- to set background color for territories您可以使用选项 --> datalessRegionColor -- 为领土设置背景颜色

see following working snippet...请参阅以下工作片段...

 google.charts.load('current', { callback: drawRegionsMap, packages:['geochart'] }); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Population', 'Area'], ['Kiev', 2761477, 1285.31], ['Kherson', 1324110, 181.76], ['Zakarpattiya', 1324110, 181.76], ['Zhitomir', 1324110, 181.76], ['Harkiv', 1324110, 181.76], ['Kirovohrad', 1761477, 181.76], ]); var options = { region: 'UA', resolution: 'provinces', displayMode: 'markers', pointSize: 10, pointShape: 'diamond', colorAxis: {colors: ['green', 'blue']}, hAxis: {minValue: 20, maxValue: 20}, sizeAxis: {minSize: 27, maxSize: 27}, datalessRegionColor: '#ffcc80' }; var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); };
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM