3

This is a two part question.

First, is there a way to change the size of the markers on google's Geochart when the points being plotted are only cities and don't have a population or size tied to them? I'm just listing cities with no value attached to it and all of Google's examples have some sort of population attached to it.

For example, Google uses this bit of code which the size of the marker is reflected by the population.

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]
  ]);

Is there any way to change the marker size without having it set by some sort of area or population?

Secondly, since I don't have a number for the marker size (only city name), how can I change the color of the markers? From what I understand, colorAxis is based off of the number tied to the city being plotted.

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

Here's a link to the API's documentation https://developers.google.com/chart/interactive/docs/gallery/geochart

4

3 回答 3

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}
于 2012-10-05T10:34:33.260 回答
0

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

于 2012-08-08T07:58:50.167 回答
0 
/*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'
    },
  };
}
于 2018-02-26T05:53:34.273 回答