在Highmaps中顯示點和向下追溯數據

Question

我在使用Highmaps顯示熱圖數據以及地圖上的點時遇到問題。這裏有一個例子：

http://jsfiddle.net/3se9q3uq/

這是剛剛開箱例如，對於美國的鑽取地圖（http://www.highcharts.com/maps/demo/map-drilldown），但是，這樣如果你深入到伊利諾伊我的狀態我已經修改了它試圖將單個點（在一系列內）添加到地圖中。

下面是我使用這樣做的片段：（如果你打開你的瀏覽器控制檯）

chart.addSeries({ 
 
    id: 'points', 
 
    type: 'mappoint', 
 
    name: 'Store Data', 
 
    color: Highcharts.getOptions().colors[8], 
 
    data: [{ 
 
    name: 'Point 1', 
 
    lat: 40.0633, 
 
    lon: -88.2498 
 
    }] 
 
});

結果是一個錯誤，指出：

Highcharts error＃22：www.highcharts.com/errors/22

我已經試過轉換座標系，而是繪X & Y：

var pos = chart.fromLatLonToPoint({ 
 
    lat: json[i].latitude, 
 
    lon: json[i].longitude 
 
});

但是因爲它不能給點轉換沒有工作，X和空返回0 Y.我也試過改變地圖類型，但這也不起作用。

我可以創建一個沒有向下鑽取的點的地圖，但我似乎無法像使用具有相同效果和點的鑽取的效果（顏色）一樣獲得熱圖層。我沒有看到他們身邊任何地方列出的關於點和深入/着色部分的限制。

有沒有人能夠得到這個工作之前？我是否將這些地圖圖層統一考慮，這是不可行的？

Answer 1

要使用經度和緯度，您需要包含Proj4js。另外，您需要在座標系之間進行手動轉換，或者使用Highmaps map collection的地圖。例如：

<script src="http://.../proj4.js"></script> 
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script> 

在你的情況下鑽例如包裝在Highcharts.geojson的Highchart.maps包括額外的屬性（drilldown和value），像這樣：

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']); 

$.each(data, function (i) { 
    this.drilldown = this.properties['hc-key']; 
    this.value = i; // Non-random bogus data 
}); 

$('#container').highcharts('Map', { 
    // ... 
    series : [{ 
     data : data, 
     name: 'USA' 
    }] 
}); 

這似乎導致Highmaps不承認從集合中映射爲一個，因此您不能使用此方法使用經度和緯度。

相反，你可以使用Highcharts.maps，因爲它是，並且同時使用mapData和data與joinBy附加額外數據的方式，同時保持經/緯度的功能，如：

var myData = [{ 
    "hc-key": "us-ma", 
    "value": 1 
}]; 

$('#container').highcharts('Map', { 
    // ... 
    series : [{ 
     data : myData, 
     mapData : Highcharts.maps['countries/us/us-all'], 
     joinBy: 'hc-key', 
     name: 'USA' 
    }] 
}); 

不幸的是，在兩個層面上使用這種技術（頂部和向下鑽取）和您的附加點系列我遇到了各種問題。奇怪的是，包括兩個data和mapData相同的信息似乎在躲避他們，所以我結束了這種方法：

var mapData = Highcharts.maps['countries/us/us-all'], 
    myData = Highcharts.geojson(Highcharts.maps['countries/us/us-all']); 

$.each(myData, function (i) { 
    this['hc-key'] = this.properties['hc-key']; 
    this.drilldown = this.properties['hc-key']; 
    this.value = i; 
}); 

$('#container').highcharts('Map', { 
    // ... 
    series : [{ 
     data : myData, 
     mapData : mapData, 
     joinBy: 'hc-key', 
     name: 'USA' 
    }] 
}); 

查看如何它目前與明細，經/緯度的支持和點系列看起來this updated JSFiddle。

我還會包括this JSFiddle，它使用更標準的data的方法（而不是克隆mapData），但有各種各樣的問題，我不知道他們爲什麼發生。