GeoCharts如何显示国家名称而不是代码 [英] GeoCharts how to show country names instead of codes

问题描述

我想使用Google GeoChart进行可视化.我输入了国家代码.我想显示完整的国家名称，但是只会弹出国家代码.

I would like to make a visualization with the google GeoChart. I put in country codes. I would like to display the full country names but only the country code pops up.

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

推荐答案

使用对象符号，
您可以提供值( v:)和格式化的值( f:)

using object notation,
you can provide the value (v:) and the formatted value (f:)

{v: 'IT', f: 'Italy'}

默认情况下，工具提示将显示格式值

the tooltip will display the formatted value by default

使用对象符号更新数据并提供名称作为格式值

update the data using object notation and provide the name as the formatted value

请参阅以下工作片段，
悬停在意大利上方以查看结果...

see following working snippet,
hover over Italy to see the result...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    [{v: 'IT', f: 'Italy'}, 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

这篇关于GeoCharts如何显示国家名称而不是代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！