Geochart:使用ISO 3266-2区域代码但显示真实姓名

msp*_*msp 5 javascript google-visualization

我正在使用Google Visualization Geochart API创建国家/地区的地图.我提供ISO 3266-2国家细分代码并获得正确的结果.但是,在图表中将ISO 3266-2代码显示为标签是一种糟糕的用户体验.所以我想提供一个自定义标签.以此为例:

  function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['DE-BY', 200],
      ['DE-NW', 500]
    ]);

    var geochart = new google.visualization.GeoChart(
          document.getElementById('visualization'));
    geochart.draw(data, {width: 556, height: 347, region: 'DE', resolution: 'provinces'});
  }
Run Code Online (Sandbox Code Playgroud)

[在Code Playground上试试]

我想提供'DE-BY'但是有'Bavaria'作为标签.虽然谷歌写了一个,但我必须使用ISO 3266-2代码

等值的英文文本(例如,"US-NJ"或"New Jersey")

是允许的,它是非常不可靠的,并不适用于'巴伐利亚'的例子.

rrr*_*rrr 12

这是一个有效的概念的快速证明,我正在寻找类似的东西,并希望自动获得名称,但我不确定这是否可能,但这至少允许手动填充工具提示文本.

关键因素是使用所需的列创建表,然后应用PatternFormat以获取所需的工具提示,然后创建仅包含数据绑定所需的列的数据视图.

function drawVisualization() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Value');
      data.addColumn('string', 'Display');

      data.addRows([
        ['Germany', 200, 'Germany'],
        ['United States', 300, 'USA'],
        ['Brazil', 400, 'Brasil'],
        ['Canada', 500, 'Canada'],
        ['France', 600, 'France'],
        ['RU', 700, 'Russia']
      ]);

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

      var formatter = new google.visualization.PatternFormat('{1}');  
      formatter.format(data, [0, 2]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1]);  

      geochart.draw(view, {width: 556, height: 347});
    }
Run Code Online (Sandbox Code Playgroud)