Cómo utilizar distintos colores con Google GeoChart

Entiendo cómo usar GeoChart para mostrar datos que están en un continuo (es decir, temperatura).Cómo utilizar distintos colores con Google GeoChart

Pero, ¿cómo se puede configurar para que muestre conjuntos de datos distintos (estados que son republicanos, democráticos, independientes)? es posible?

Gracias!

Fuente

2012-02-21 Jonathan

En este momento no es posible utilizar GeoChart de esta manera. Para lograr esto, terminé usando un mapa svg y cambiando el relleno a través de css.

Un buen tutorial se puede encontrar aquí: http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/

Fuente

2012-03-21 15:35:22 Jonathan

¿Has probado algo como esto?

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

Fuente

2012-02-28 12:13:57 dokaspar

También puede resolver este dando masajes a los datos un poco y el uso de valores con formato para las etiquetas. Usted debe ser capaz de pegar el código siguiente en here para ver un ejemplo:

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

Fuente

2012-03-27 20:58:50 Scott

Esto ahora se puede lograr mediante la conversión de sus clasificaciones de números en lugar de nombres de los partidos. Por ejemplo:

democrats = 0 
independents = 1 
republicans = 2

siguiente incluye un color para cada partido en los colores gama colorAxis:

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

El código siguiente muestra los estados democráticos como el azul, republicanos como el rojo y los independientes como verde (los datos están compuesto, no sé qué estados prefieren qué parte).

<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>

Mientras los colores que se lista en el colorAxis coinciden con el número y orden de clasificación que utiliza para los estados, se puede controlar el color del estado.

sample map

Fuente

2014-12-06 19:16:59 AWaddington

Cómo utilizar distintos colores con Google GeoChart

Respuesta

Cuestiones relacionadas