Google Marker GeoChart，创建现有标记的列表

Question

类似于饼图如何在图表中列出您可以悬停的所有属性：

https://developers.google.com/chart/interactive/docs/gallery/piechart

这可以通过标记 GeoChart 以任何方式进行吗？一切正常，除了我真的很想在我的地图上列出所有城市的列表，并且能够将鼠标悬停在该列表的条目上并让正确的标记对此做出“反应”。我还没有找到任何似乎使这成为可能的东西。

Answer 1

首先，使用以下图表选项...

  tooltip: {
    trigger: 'both'
  }

这将导致工具提示在用户悬停并选择图表时显示。

然后在您的表格/列表上，当用户悬停一行时，
使用图表法 --> setSelection
这将导致出现工具提示。

chart.setSelection([{row: sender.target.parentNode.rowIndex - 1}]);

然后在用户离开表格行时清除选择。

chart.setSelection([]);

---

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['geochart', 'table'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
  ]);

  var containerChart = document.getElementById('chart');
  var containerTable = document.getElementById('table');

  var chart = new google.visualization.GeoChart(containerChart);
  var table = new google.visualization.Table(containerTable);

  google.visualization.events.addListener(table, 'ready', function () {
    chart.draw(data, {
      tooltip: {
        trigger: 'both'
      }
    });

    $(containerTable).find('tbody > tr > td').on('mouseenter', markerShow);
    $(containerTable).find('tbody > tr > td').on('mouseleave', markerHide);
  });

  table.draw(data);

  function markerShow(sender) {
    chart.setSelection([{row: sender.target.parentNode.rowIndex - 1}]);
  }

  function markerHide(sender) {
    chart.setSelection([]);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.flex-grow {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-static {
  flex-grow: 0;
  flex-shrink: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="flex-row">
  <div class="flex-grow">
    <div id="chart"></div>
  </div>
  <div class="flex-static">
    <div id="table"></div>
  </div>
</div>