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

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>

我希望有所帮助!