时间戳

首页 > 解决方案 > GeoChart : addListener :ERROR 错误：无效的列索引为空。应该是 [0-1] 范围内的整数

typescript - GeoChart : addListener :ERROR 错误：无效的列索引为空。应该是 [0-1] 范围内的整数

问题描述

我正在尝试从 Google GeoChart 获取单击国家/地区的国家/地区名称，但使用 addListner 时出现上述错误。

堆栈闪电战链接：https ://stackblitz.com/edit/angular-advanced?embed=1&file=src/app/home/home.component.ts&hideExplorer=1&hideNavigation=1

另外，是否可以显示带有区域名称的颜色轴条作为所选颜色？

标签： typescriptgoogle-visualization

解决方案

GeoChart 只返回行索引，列返回 null

使用第 0 列（零），它将始终是国家名称的列

请参阅以下工作片段... 

google.charts.load('current', {
  'packages':['geochart'],
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
  ]);

  var options = {};

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

  google.visualization.events.addListener(chart, 'select', selectHandler);

  function selectHandler() {
    var selectedItem = chart.getSelection();
    if (selectedItem.length > 0) {
      console.log(data.getValue(selectedItem[0].row, 0));
    }
  }

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

推荐阅读