Как использовать разные цвета с Google GeoChart - PullRequest
Новая
       23

Как использовать разные цвета с Google GeoChart

9 голосов
/ 22 февраля 2012

Я понимаю, как использовать GeoChart для отображения данных, которые находятся в континууме (т.е. температура).

Но как вы можете настроить его для отображения отдельных наборов данных (республиканские, демократические, независимые государства)? Это возможно?

Спасибо!

Ответы [ 4 ]

11 голосов
/ 28 марта 2012

Вы также можете решить эту проблему, немного массируя данные и используя отформатированные значения для ваших меток. Вы должны иметь возможность вставить следующий код в здесь , чтобы увидеть пример: 

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

1006 *

5 голосов
/ 06 декабря 2014

Теперь это может быть достигнуто путем преобразования ваших классификаций в числа вместо названий партий. Например: 

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

2 голосов
/ 21 марта 2012

В настоящее время невозможно использовать GeoChart таким способом. Для этого я использовал карту svg и изменил заливку через css.

Хороший учебник можно найти здесь: http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/

2 голосов
/ 28 февраля 2012

Вы пробовали что-то подобное? 

data.addColumn('string', 'State');
data.addColumn('number', 'Votes (%)');
data.addColumn('string', 'Winner');
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...