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

时间:2018-08-08 16:20:42

标签: typescript google-visualization

我正在尝试从Google GeoChart获取被点击的国家/地区的国家/地区名称,但是我通过使用addListner得到了上述错误。

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

还可以显示带有所选颜色的区域名称的色轴条吗?

1 个答案:

答案 0 :(得分:0)

GeoChart仅返回行索引,对于列则返回

使用列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>