[英]Geochart map change color
我可以找到每个 backgroundColor、colorAxis、datalessRegionColor 等的配置名称。但我只想更改绿色的默认颜色。
示例代码:
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
geocharts 文档确实提供了您需要做的事情的信息。 颜色可在图表的var options
中配置。 https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options
如果您只想更改默认颜色,您只需在colors:
选项中指定您想要的颜色。
例如:
var options = {
//Put your color hex code here
colors: ['#FF0000'] //eg. red
};
默认情况下,这会将您的数据从最浅的阴影着色到为数据值范围(最低到最高)指定的颜色。 在您的代码中,这将是从 200 到 700。但是,您可以指定您希望数据范围的颜色。
例如,如果您希望数据从绿色变为蓝色,您可以简单地指定 2 种颜色。
var options = {
//Put your colour hex code here
colors: ['#00FF00','#0000FF']
};
您可以为喜欢的任何颜色执行此操作,但通常如果您试图展示国家之间的某种差异,最好只使用 2 种颜色来显示数据的进展。 有关示例,请参见此 Fiddle 。
您可以通过上述任何选项(例如colorAxis
)更多地使用颜色。 文档很好地解释了这些。
您正在寻找以下内容:
options["defaultColor"] = '';
替换为您选择的颜色。
我正在尝试使用 Google Chart 为网站创建自定义可点击地图,我希望这些国家/地区可点击并显示其旗帜。 另外,当我在选定的国家/地区时,我希望颜色发生变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.