Highmaps熱圖

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 
}]; 

1. 的地圖創建一個虛擬系列，也可以是一些國家的或者全部。

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

2. 創建一個將用於交集列表的矩形。

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

3. 循環顯示真實數據。每個點的緯度/經度應根據軸刻度映射到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) 
   

4. 移動的矩形，以計算出的位置並獲得交叉路口明細表 - 我們希望從列表中選擇一個路徑元素。

   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); 
       }); 
   

5. 循環遍歷虛擬序列並查找虛擬點的路徑是否與路口列表中的路徑匹配。如果是這樣，狀態將在地圖上找到，您可以根據實際數據值更新其值。

   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/

Answer 2

也許可以嘗試這樣的事情，所以你可以通過在狀態highchart？

Google Maps: how to get country, state/province/region, city given a lat/long value?