Question

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

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

我希望有所帮助！

Answer 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

谷歌可视化 - GeoChart - 国家色标，标签和图例

2 个答案: