Как использовать разные цвета с 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

ответ

Смежные вопросы