如何使用google geochart为文本启用悬停事件

Question

如何使用google geochart为文本启用悬停事件

Nik*_*ntz 2 javascript css charts google-visualization

是否可以将悬停效果与google geochart一起使用,以便地图上的选定区域也会触发区域列表中区域文本颜色的更改？

如果在地图上选择蒙大拿州,我希望列表中的"蒙大拿"这个词有不同的颜色.

我希望你明白我想要实现的目标.

function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Province'],
    ['Montana'],
    ['Washington'],
    ['Oregon'],
    ['California'],
    ['New York'],
    ['Connecticut'],
    ['Alabama'],
    ['Idaho'],
    ['Nevada'],
    ['Nebraska'],
    ['Colorado'],
    ['Arizona'],
    ['New Mexico'],
    ['Texas'],
    ['Louisiana'],
    ['Oklahoma'],
    ['Virginia'],
    ['Kentucky'],
    ['Illinois'],
    ['Indiana'],
    ['Arkansas'],
    ['Louisiana'],
    ['Mississippi'],
    ['Georgia'],
    ['Florida'],
    ['Missouri'],
    ['Iowa'],
    ['Minnesota'],
    ['South Dakota'],
    ['North Dakota'],
    ['Wyoming'],
    ['Utah'],
    ['Illinois'],
    ['Maine'],
    ['Vermont'],
    ['Massachussets'],
    ['Maryland'],
    ['Delaware'],
    ['New Jersey'],
    ['South Carolina'],
    ['North Carolina'],
    ['Michigan'],
    ['Wisconsin'],
    ['Kansas'],
    ['Alaska'],
    ['Hawaii'],
    ['Rhode Island'],
    ['District of Colombia'],
    ['Ohio'],
    ['West Virginia'],
    ['Pennsylvania'],
    ['Tennessee'],
    ['New Hampshire']
  ]);

  var options = {
    region: 'US',
    backgroundColor: '#eee',
    datalessRegionColor: '#ffc801',
    width: 468,
    height: 265,
    resolution: 'provinces',
  };
  var container = document.getElementById('mapcontainer');
  var chart = new google.visualization.GeoChart(container);

  function myClickHandler() {
    var selection = chart.getSelection();
    var message = '';
    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      message += '{row:' + item.row + ',column:' + item.column + '}';
      if (item.row != null) {
        message += '{row:' + item.row + '}';
      }
    }
    if (message == '') {
      message = 'nothing';
    }

    if (item.row == 0) {
      window.location = "/montana";
    }
    if (item.row == 2) {
      window.location = "/oregon";
    }
    if (item.row == 3) {
      window.location = "/california";
    }
    if (item.row == 4) {
      window.location = "/new_york";
    }
    if (item.row == 6) {
      window.location = "/alabama";
    }
    if (item.row == 7) {
      window.location = "/idaho";
    }
    if (item.row == 8) {
      window.location = "/nevada";
    }
    if (item.row == 9) {
      window.location = "/nebraska";
    }
    if (item.row == 5) {
      window.location = "/connecticut";
    }
    if (item.row == 1) {
      window.location = "/washington";
    }
    if (item.row == 10) {
      window.location = "/colorado";
    }
    if (item.row == 11) {
      window.location = "/arizona";
    }
    if (item.row == 12) {
      window.location = "/new_mexico";
    }
    if (item.row == 13) {
      window.location = "/texas";
    }
    if (item.row == 14) {
      window.location = "/louisaina";
    }
    if (item.row == 15) {
      window.location = "/oklahoma";
    }
    if (item.row == 16) {
      window.location = "/virginia";
    }
    if (item.row == 17) {
      window.location = "/kentucky";
    }
    if (item.row == 18) {
      window.location = "/illinois";
    }
    if (item.row == 19) {
      window.location = "/indiana";
    }
    if (item.row == 20) {
      window.location = "/arkansas";
    }
    if (item.row == 21) {
      window.location = "/louisiana";
    }
    if (item.row == 22) {
      window.location = "/mississippi";
    }
    if (item.row == 23) {
      window.location = "/georgia";
    }
    if (item.row == 24) {
      window.location = "/florida";
    }
    if (item.row == 25) {
      window.location = "/missouri";
    }
    if (item.row == 26) {
      window.location = "/iowa";
    }
    if (item.row == 27) {
      window.location = "/minnesota";
    }
    if (item.row == 28) {
      window.location = "/south_dakota";
    }
    if (item.row == 29) {
      window.location = "/north_dakota";
    }
    if (item.row == 30) {
      window.location = "/wyoming";
    }
    if (item.row == 31) {
      window.location = "/utah";
    }
    if (item.row == 32) {
      window.location = "/illinois";
    }
    if (item.row == 33) {
      window.location = "/maine";
    }
    if (item.row == 34) {
      window.location = "/vermont";
    }
    if (item.row == 35) {
      window.location = "/massachussets";
    }
    if (item.row == 36) {
      window.location = "/maryland";
    }
    if (item.row == 37) {
      window.location = "/delaware";
    }
    if (item.row == 38) {
      window.location = "/new_jersey";
    }
    if (item.row == 39) {
      window.location = "/south_carolina";
    }
    if (item.row == 40) {
      window.location = "/north_carolina";
    }
    if (item.row == 41) {
      window.location = "/michigan";
    }
    if (item.row == 42) {
      window.location = "/wisconsin";
    }
    if (item.row == 43) {
      window.location = "/kansas";
    }
    if (item.row == 44) {
      window.location = "/alaska";
    }
    if (item.row == 45) {
      window.location = "/hawaii";
    }
    if (item.row == 46) {
      window.location = "/rhode_island";
    }
    if (item.row == 47) {
      window.location = "/tamil_nadu/";
    }
    if (item.row == 48) {
      window.location = "/ohio";
    }
    if (item.row == 49) {
      window.location = "/west_virginia";
    }
    if (item.row == 50) {
      window.location = "/pennsylvania";
    }
    if (item.row == 51) {
      window.location = "/tennessee";
    }
    if (item.row == 52) {
      window.location = "/new_hampshire";
    }
  }

  google.visualization.events.addListener(chart, 'select', myClickHandler);
  chart.draw(data, options);
}
google.load('visualization', '1', {
  packages: ['geochart'],
  callback: drawMap
});

Run Code Online (Sandbox Code Playgroud)

#regions {
  display: float:left;
}

Run Code Online (Sandbox Code Playgroud)

<script type='text/javascript' src='http://www.google.com/jsapi'></script><table><tr><td><div id="mapcontainer">

</td><td>
  <ul class="regions">
    <li><a id="region_13" class="region" href="/montana">Montana</a></li>
    <li><a id="region_14" class="region" href="/nebraska">Nebraska</a>
    </li>
    <li><a id="region_15" class="region" href="/nevada">Nevada</a>
    </li>
    <li><a id="region_12" class="region" href="/new_hampshire">New Hampshire</a></li>

    <li><a id="region_14" class="region" href="/minnesota">Minnesota</a>
    </li>
    <li><a id="region_15" class="region" href="/mississippi">Mississippi</a>
    </li>
    <li><a id="region_12" class="region" href="/missouri">Missouri</a></li>

  </ul>
  </td></tr></table>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Whi*_*Hat 6

1) GeoChart缺少其他谷歌图表的许多事件和方法,
包括'onmouseover'

要手动实现,我们可以使用常规的dom事件 - >'mouseover'

当它发射时,发出一个dom 'click'事件

这将触发图表的 'select'事件

该'select'事件可用于获取被点击或"鼠标悬停"的区域的价值,

然后可以用来突出显示列表条目

唯一的问题是将"鼠标悬停点击"事件与真正的点击事件分开

我们可以使用变量来保存最后发生的事件,

然后检查图表'select'事件中的变量

2) 'select'事件

对于此图表,在任何给定时刻只能选择一个实体,

无需通过选择数组循环

此外,单击某个区域时,会选中该区域

再次单击相同区域时,将取消选择该区域

这意味着chart.getSelection()将返回一个空数组

当"鼠标悬停点击"事件发生时,我们需要清除图表的选择

清除选择将确保在发生实际点击事件时选择区域

3)其他说明......

截至2016年9月12日,GeoChart不再要求您包含jsapi装载机.

建议使用较新的库loader.js代替

根据发行说明 ......

通过jsapi加载程序保留的Google Charts版本不再一致地更新.请loader.js从现在开始使用新的gstatic .

这只会改变load声明

另外,您可以使用数据表来查找所选区域的值,

无需使用一堆if语句来确定值

4)看下面的工作片段......

数据表用于构建区域链接列表

当某个区域被"鼠标悬停"时,列表中的链接将突出显示

当一个区域被"点击"时,它的名字将被发送到控制台,

这很容易被替换 window.location = ...

function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Province'],
    ['Montana'],
    ['Washington'],
    ['Oregon'],
    ['California'],
    ['New York'],
    ['Connecticut'],
    ['Alabama'],
    ['Idaho'],
    ['Nevada'],
    ['Nebraska'],
    ['Colorado'],
    ['Arizona'],
    ['New Mexico'],
    ['Texas'],
    ['Louisiana'],
    ['Oklahoma'],
    ['Virginia'],
    ['Kentucky'],
    ['Illinois'],
    ['Indiana'],
    ['Arkansas'],
    ['Louisiana'],
    ['Mississippi'],
    ['Georgia'],
    ['Florida'],
    ['Missouri'],
    ['Iowa'],
    ['Minnesota'],
    ['South Dakota'],
    ['North Dakota'],
    ['Wyoming'],
    ['Utah'],
    ['Illinois'],
    ['Maine'],
    ['Vermont'],
    ['Massachussets'],
    ['Maryland'],
    ['Delaware'],
    ['New Jersey'],
    ['South Carolina'],
    ['North Carolina'],
    ['Michigan'],
    ['Wisconsin'],
    ['Kansas'],
    ['Alaska'],
    ['Hawaii'],
    ['Rhode Island'],
    ['District of Colombia'],
    ['Ohio'],
    ['West Virginia'],
    ['Pennsylvania'],
    ['Tennessee'],
    ['New Hampshire']
  ]);
  data.sort([{column: 0}]);

  var options = {
    region: 'US',
    backgroundColor: '#eee',
    datalessRegionColor: '#ffc801',
    width: 360,
    height: 265,
    resolution: 'provinces',
  };

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

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

  // use data table to build regions list
  var regions = document.getElementById('regions');
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    regions.insertAdjacentHTML(
      'beforeEnd',
      '<li data-row="' + i + '"><a class="region" href="/' + data.getValue(i, 0) + '">' + data.getValue(i, 0) + '</a></li>'
    );
  }

  // track events
  var lastEvent = null;
  container.addEventListener('click', function (e) {
    lastEvent = e;
  }, false);
  container.addEventListener('mouseover', function (e) {
    lastEvent = e;
    // dispatch click event to get hover value
    var event = document.createEvent('SVGEvents');
    event.initEvent('click', true, true);
    e.target.dispatchEvent(event);
  }, false);

  function myClickHandler() {
    var selection = chart.getSelection();
    var message = '';
    if (selection.length > 0) {
      if (selection[0].row !== null) {
        if (lastEvent.type === 'mouseover') {
          // mouseover
          var regionLinks = regions.getElementsByTagName('li');
          for (var i = 0; i < regionLinks.length; i++) {
            var regionRow = parseInt(regionLinks[i].getAttribute('data-row'));
            regionLinks[i].style.backgroundColor = (regionRow === selection[0].row) ? 'cyan' : null;
            chart.setSelection([]);
          }
        } else {
          // click
          console.log("/" + data.getValue(selection[0].row, 0));
          //window.location = "/" + data.getValue(selection[0].row, 0);
        }
      }
    }
  }

  chart.draw(data, options);
}
google.charts.load('current', {
  packages:['geochart'],
  callback: drawMap
});

Run Code Online (Sandbox Code Playgroud)

div {
  display: inline-block;
  vertical-align: top;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mapcontainer"></div>
<div id="tablecontainer">
  <ul class="regions" id="regions"></ul>
</div>

Run Code Online (Sandbox Code Playgroud)

有史以来最好的答案之一。 (2认同)

归档时间：	8 年，7 月前
查看次数：	612 次
最近记录：	8 年，7 月前