Question

我理解如何使用GeoChart显示连续的数据（即温度）。

但是，如何配置它来显示不同的数据集（共和，民主，独立的状态）？这可能吗？

谢谢！

Answer 1

您也可以通过稍微按摩数据并使用标签的格式化值来解决此问题。您应该能够将以下代码粘贴到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);
}

Answer 2

现在可以通过将您的分类转换为数字而不是聚会名称来实现。例如：

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

Answer 3

你尝试过这样的事吗？

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

Answer 4

此时无法以这种方式使用GeoChart。为了实现这一点，我最终使用svg地图，并通过css更改填充。

可在此处找到一个好的教程：http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/

如何在Google GeoChart中使用不同的颜色

4 个答案: