2

我很难让 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>
4

2 回答 2

5

您的问题是，由于您在引号中指定值，因此 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>

我希望这会有所帮助！

于 2013-06-19T21:15:27.037 回答
0

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

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

  • 对于图例，您无需在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'
};

这是工作示例。有关更多地理图表相关查询，请查看jqfaq.com

于 2013-07-11T10:19:21.380 回答