高图热图

Raghu 发表于 Dev

拉古

我们如何使用高图生成热图？-我所能做的就是在地图上绘制它们。（http://www.highcharts.com/maps/demo/mappoint-latlon）。

我需要与此类似的热图（http://www.highcharts.com/maps/demo/color-axis），但是提供给我的数据是经/纬度格式

但我看不到任何与此相关的示例。

有任何想法吗？谢谢

摩根自由

我认为没有直接的方法可以做到这一点。我可以想到一个基于getIntersectionList的解决方案，因此请检查浏览器是否支持该方法。

因此，例如，您使用“美国各州”地图，并且数据的格式如下：

var realData = [{
  lat: 47.44439588071483,
  lon: -100.71715548110211,
  value: 117
}, {
  lat: 44.70260711020746,
  lon: -100.27445285060993,
  value: 350
}, {
  lat: 40.31102515359527,
  lon: -82.72203429498387,
  value: 840
}, {
  lat: 39.89016758310687,
  lon: -74.53569085311527,
  value: 14
}];

为地图创建一个虚拟序列，它可以是某些状态，也可以是所有状态。

var dummyData = [{
  code: 'NJ',
  value: 1
}, {
  code: 'OH',
  value: 1
}, {
  code: 'ND',
  value: 1
}, {
  code: 'SD',
  value: 1
}];

创建一个将用于交集列表的矩形。

var rect = this.renderer.rect(0, 0, 1, 1).attr({
      stroke: 'black',
      'stroke-width': 1
    }).add();

遍历真实数据。每个点的纬度/经度应根据轴比例尺映射到x，y值，然后再映射到像素。

realData.forEach(point => {
      var pos = this.fromLatLonToPoint({
        lat: point.lat,
        lon: point.lon
      });

      point.x = this.xAxis[0].toPixels(pos.x);
      point.y = this.yAxis[0].toPixels(pos.y)

将rect移动到计算出的位置并获取相交列表-我们需要该列表中的路径元素。

rect.attr({
        x: point.x,
        y: point.y
      });

      var list = Array.prototype.filter.call(
        this.renderer.box.getIntersectionList(rect.element.getBBox(), null),
        element => element.tagName === 'path'
      );

      point.path = list.length && list[0];
      paths.push(point.path);
    });

遍历虚拟序列，查找虚拟点的路径是否与相交列表中的路径匹配。如果是这样，则可以在地图上找到状态，然后可以根据实际数据值更新其值。

 var series = this.series[0],
      data = series.data,
      dataLen = data.length,
      i = 0;

      for (; i < dataLen; i++) {
        var idx = paths.indexOf(data[i].graphic.element);
        if (idx > -1) {
          data[i].update({
            value: realData[idx].value
          });
        }
      }

示例：http：//jsfiddle.net/bavLuLpj/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。