Question

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

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

但我没有看到任何与之相关的例子。

有什么想法吗？感谢

Answer 1

我认为没有直接的方法可以做到这一点。我可以想到一个基于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();

循环播放真实数据。每个点的lat / lon应根据轴刻度映射到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/

Highmaps热图

1 个答案: