Google 可视化 - GeoChart - 国家色标、标签和图例答案

【问题标题】：Google Visualizations - GeoChart - Country Color Scale, Label and LegendGoogle 可视化 - GeoChart - 国家色标、标签和图例
【发布时间】：2013-06-19 15:45:10
【问题描述】：

我很难让 Google GeoChart 像他们在文档（甚至示例）中描述的那样工作

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#Data_Format

在此页面上的示例中，地理图表显示了使用基于受欢迎程度的比例的国家颜色。然而，我自己的地图以相同的深色显示所有国家/地区，无论流行度字段的值如何。此外，该示例显示了一个图例，而我自己没有，区域示例还显示带有国家名称和值的工具提示标签，而我的仅显示数据的原始值。

我一直在翻阅文档来尝试解决这个问题，但我被卡住了。任何帮助表示赞赏。

下面是我的代码：

<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([
      ['Country', 'Visits'],
  ['Austria','1'],
      ['Brazil','2'],
      ['Canada','40'],
      ['China','1'],
      ['Czech Republic','1'],
      ['Denmark','1'],
      ['Dominican Republic','1'],
      ['Ecuador','1'],
      ['France','1'],
      ['Netherlands','21'],
      ['United Kingdom','13'],
      ['United States','1140']
 ]);

    var options = {
        colorAxis: {colors: ['#f5f5f5','#267114']},
        legend: 'Vists'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

【问题讨论】：

如果其他人遇到这种情况 - 颜色的问题似乎是单引号中的数字字段被解释为字符串数据而不是数字数据。删除单引号解决了这个问题。缺乏传奇仍然是个问题。

标签： google-visualization

【解决方案1】：

您的问题是，由于您在引号中指定值，因此 GeoChart 将您的值视为位置名称。为了将它们解释为值，它们需要是数字。通过这样做，我能够让您的示例发挥作用。

这是修改后的代码：

<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([
      ['Country', 'Visits'],
      ['Austria', 1],
      ['Brazil',  2],
      ['Canada',  40],
      ['China',   1],
      ['Czech Republic',1],
      ['Denmark', 1],
      ['Dominican Republic',1],
      ['Ecuador', 1],
      ['France',  1],
      ['Netherlands',   21],
      ['United Kingdom',13],
      ['United States',1140]
 ]);

    var options = {
        colorAxis: {colors: ['#f5f5f5','#267114']},
        legend: 'Vists'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

希望对你有帮助！

【讨论】：

【解决方案2】：

这是您的两个问题（工具提示和图例）的解决方案。

对于工具提示，您必须指定不带引号的整数值。

对于图例，您无需在options 中指定图例属性。这是更正后的代码。

var data = google.visualization.arrayToDataTable([
  ['Country', 'Visits'],
  ['Austria', 1],
  ['Brazil', 2],
  ['Canada', 40],
  ['China', 1],
  ['Czech Republic', 1],
  ['Denmark', 1],
  ['Dominican Republic', 1],
  ['Ecuador', 1],
  ['France', 1], 
  ['Netherlands', 21],
  ['United Kingdom', 13],
  ['United States', 1140]
]);

 var options = {
    colorAxis: {colors: ['#f5f5f5','#267114']}
    //legend: 'Vists'
};

这里是working sample。如需更多与地理图表相关的查询，请查看jqfaq.com

【讨论】：