Geochart地图改变颜色

时间:2014-06-22 10:55:12

标签: javascript google-api geomap

我可以找到每个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>

2 个答案:

答案 0 :(得分:2)

地理标志文档确实提供了您需要执行的操作的信息。颜色可在图表的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)更多地使用颜色。文档很好地解释了这些。

答案 1 :(得分:0)

您正在寻找以下内容:

options["defaultColor"] = '';

替换您选择的颜色。