谷歌地理图表标记大小和颜色答案

【问题标题】：google geochart marker size and color谷歌地理图表标记大小和颜色
【发布时间】：2012-06-12 02:58:08
【问题描述】：

这是一个两部分的问题。

首先，当绘制的点只是城市并且没有人口或大小与之相关时，有没有办法改变谷歌地理图表上标记的大小？我只是列出了没有附加价值的城市，而且 Google 的所有示例都与某种人口相关。

例如，谷歌使用这段代码，标记的大小由人口反映。

function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City',  'Population', 'Area'],
    ['Rome',     2761477,    1285.31],
    ['Milan',    1324110,    181.76],
    ['Naples',   959574,     117.27],
    ['Turin',    907563,     130.17],
    ['Palermo',  655875,     158.9],
    ['Genoa',    607906,     243.60],
    ['Bologna',  380181,     140.7],
    ['Florence', 371282,     102.41]
  ]);

有没有什么方法可以改变标记的大小，而不需要由某种区域或人口设置？

其次，由于我没有标记大小的数字（只有城市名称），我该如何更改标记的颜色？据我了解，colorAxis 是基于与正在绘制的城市相关的数字。

colorAxis: {colors: ['green', 'blue']}

这里是 API 文档的链接https://developers.google.com/chart/interactive/docs/gallery/geochart

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

据我从文档中了解到，您无法直接定义 Google Geochart 中标记的颜色和大小。我建议您为您的任务尝试另一种解决方案 - jVectorMap。使用markers 参数定义标记时，您可以为每个标记设置大小和填充颜色，或使用markerDefaults 定义默认参数。

【讨论】：

【解决方案2】：

通过一些调整，您可以做到这一点。

查看我创建的一些示例：

http://cmoreira.net/interactive-world-maps-demo/svg-maps-of-the-states-in-usa/

要改变颜色，你应该这样做：

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Country'); 
    data.addColumn('number', 'Value');
    data.addColumn({type:'string', role:'tooltip'});

    data.addRows([[{v:"Olympia  Washington",f:"Olympia"},1,"Capital city of the state of Washington"],[{v:"Seattle Washington",f:"Seattle"},2,"Largest city of the state of Washington"],[{v:"Spokane  Washington",f:"Spokane"},3,"Seconde Largest city of the state of Washington"],[{v:"Vancouver  Washington",f:"Vancouver"},4,"Fourth largest city of the state of Washington"],]);

var options = {   colorAxis: {minValue: 1, maxValue:4,  colors: ['#4A9928','#204DA8','#992F1A','#2292C9',]},

    (...)

所以，你增加一个数字，并提供尽可能多的不同颜色来匹配这些值。

要更改大小，我没有测试它，但我想类似的方法会起作用，如果你使用这个值：

sizeAxis: {minValue: 1, maxValue:4,minSize:1,  maxSize: 4}

【讨论】：

【解决方案3】：

/*Code for geo chart configuration option*/
$scope.geoChartConfig = function (data, regionName) {
  $scope.chart = {};
  $scope.chart.type = "GeoChart";
  $scope.chart.data = data

  $scope.chart.options = {
    // width: 800,
    // height: 500,
    resolution: 'provinces', //code to set city wise data 
    region: regionName,
    sizeAxis: {
      // minValue: 1, //code to set min and max values in geo chart
      // maxValue: 4,
      minSize: 4, //code to set min and max marker size
      maxSize: 4
    },
    // markerOpacity:1,//code to set opacity or transparancy of chart
    displayMode: 'auto', //auto, chart will automatically detect data set whether it is regions or points
    keepAspectRatio: true, // code to set max size of chart according to div size html
    backgroundColor: '#eaf9ff',
    datalessRegionColor: 'white',
    defaultColor: '#f5f5f5',
    colorAxis: {
      colors: ['#1f77b4', '#55FF00', 'red'] //, '#ff0505'
    },
  };
}

【讨论】：