Google GeoChartで異なる色を使用する方法

GeoChartを使用して連続体（テンポラリー）にあるデータを表示する方法を理解しています。Google GeoChartで異なる色を使用する方法

しかし、別のデータセット（共和国、民主主義、独立国家）を表示するにはどうすればよいですか？これは可能ですか？

ありがとうございます！

出典

2012-02-21 Jonathan

現時点では、この方法でGeoChartを使用することはできません。これを達成するために、私はsvgマップを使用して終了し、CSSを介して塗りつぶしを変更しました。

良いチュートリアル

は、ここで見つけることができます： http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/

出典

2012-03-21 15:35:22 Jonathan

あなたはこれを試しましたか？

data.addColumn('string', 'State'); 
data.addColumn('number', 'Votes (%)'); 
data.addColumn('string', 'Winner'); 
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);

出典

2012-02-28 12:13:57 dokaspar

ます。また、ビットデータをマッサージして、ラベルの書式設定値を使用してこの問題を解決することができます。あなたは例を見てhereに次のコードを貼り付けることができる必要があります：

function drawVisualization() { 
    var geoData= new google.visualization.DataTable(); 
    geoData.addRows(2); 
    geoData.addColumn('string', 'State'); 
    geoData.addColumn('number', 'Votes (%)'); 

    geoData.setValue(0, 0, 'Alabama'); 
    geoData.setValue(0, 1, 0); 
    geoData.setFormattedValue(0, 1, '56%'); 

    geoData.setValue(1, 0, 'Maine'); 
    geoData.setValue(1, 1, 1); 
    geoData.setFormattedValue(1, 1, '64%'); 

    var options = {}; 
    options['region'] = 'US'; 
    options['resolution'] = 'provinces'; 
    options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']}; 
    options['backgroundColor'] = '#FFFFFF'; 
    options['datalessRegionColor'] = '#E5E5E5'; 
    options['width'] = 556; 
    options['height'] = 347; 
    options['legend'] = 'none'; 

    var geochart = new google.visualization.GeoChart(
     document.getElementById('visualization')); 
    geochart.draw(geoData, options); 
}

出典

2012-03-27 20:58:50 Scott

これは今の代わりにパーティ名の番号にあなたの分類を変換することによって達成することができます。例えば：

democrats = 0 
independents = 1 
republicans = 2

次にcolorAxis色アレイの各当事者の色を含む：

var options = { 
    colorAxis: { 
    colors: ['blue','green','red'] 
    ... 
    } 
}

次のコードは、赤と緑のような独立系として青、共和党（として民主的な状態を表示するデータであります私はどちらの国がどちらの当事者を好むのではないか）。

<html> 
    <head> 
    <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([ 
     ['State', 'Party'], 
     ['US-NY', 0], 
     ['US-AB', 2], 
     ['US-TX', 2], 
     ['US-CA', 0], 
     ['US-AK', 2], 
     ['US-MI', 1] 
     ]); 

     var options = { 
     displayMode: 'regions', 
     resolution:'provinces', 
     colorAxis:{ 
      colors:['blue','green','red'], 
      minValue: 0, 
      maxValue:2}, 
     region:'US', 
     legend:'none' 
     }; 

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 

    chart.draw(data, options); 
    } 
</script> 
    </head> 
    <body> 
    <div id="regions_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

は、限り、あなたはcolorAxisに一覧表示色は、あなたがた状態で使用する分類の数と順序に一致するように、あなたは状態の色を制御することができます。

sample map

出典

2014-12-06 19:16:59 AWaddington

Google GeoChartで異なる色を使用する方法

答えて

関連する問題