Google geochart 표식 크기 및 색상

Question

두 부분으로 나뉩니다.

먼저, Google의 Geochart에서 점을 찍을 점이 도시 일 뿐이며 인구 나 크기가 묶이지 않은 상태에서 마커의 크기를 변경하는 방법이 있습니까? 나는 가치가없는 도시만을 나열하고 있으며, Google의 모든 예는 어떤 종류의 인구가 그것에 첨부되어 있습니다.

예를 들어, 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']} 

여기에 지금까지 내가 직접 구글 Geochart에서 마커의 색상과 크기를 정의 할 수 없습니다 문서에서 이해 API의 문서 https://developers.google.com/chart/interactive/docs/gallery/geochart

Answer 1

에 대한 링크입니다. 귀하의 작업에 다른 해결책을 시도하는 것이 좋습니다 - jVectorMap. markers 매개 변수로 마커를 정의 할 때 모든 마커의 크기와 채우기 색을 설정하거나 markerDefaults을 사용하여 기본 매개 변수를 정의 할 수 있습니다.

Answer 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',]}, 

    (...) 

을 값과 일치하는 다른 색상.

내가 그것을 테스트하지 않았다 크기를 변경하려면,하지만 당신은이 값으로 놀러 경우 나는 유사한 aproach가 작동합니다 같아요

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

Answer 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' 
    }, 
    }; 
}