google-visualization - Google Visualizations - GeoChart - 国家色标、标签和图例

Question

我很难让 Google GeoChart 像他们在文档(甚至样本)中描述的那样工作

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

在此页面的示例中，地理图表显示国家/地区颜色，以使用基于受欢迎程度的比例。然而，我自己的 map 显示所有国家都使用相同的深色，而不管人气领域的值(value)如何。此外，该示例显示了一个图例，而我自己的没有，并且区域示例还显示了带有国家名称和值的工具提示标签，而我的仅显示了数据的原始值。

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

下面是我的代码:

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

希望对您有所帮助!