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

发布于 2025-01-08 08:59:28 字数 93 浏览 0 评论 0原文

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

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怎会甘心 2025-01-15 08:59:29

您还可以通过稍微调整数据并使用标签的格式化值来解决此问题。您应该可以将以下代码粘贴到此处看一个例子：

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

You can also solve this by massaging the data a bit and using formatted values for your labels. You should be able to paste the following code into here to see an example:

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

回复收藏 0 原文

是你 2025-01-15 08:59:29

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

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 中列出的颜色与您用于状态的分类的数量和顺序相匹配，您就可以控制状态的颜色。

示例地图

This can now be accomplished by converting your classifications to numbers instead of party names. For example:

democrats = 0
independents = 1
republicans = 2

Next include a color for each party in the colorAxis colors array:

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

The following code displays democratic states as blue, republicans as red and independents as green (the data is made up, I don't which states prefer which party).

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

As long as the colors you list in the colorAxis match the number and order of classifications you use for the states, you can control the color of the state.

sample map

回复收藏 0 原文

ら栖息 2025-01-15 08:59:29

你尝试过这样的事情吗？

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

Have you tried something like this?

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

回复收藏 0 原文