在Highmaps中显示点和向下钻取数据 [英] Displaying Points And Drilldown Data in Highmaps
问题描述
我在使用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}]}）;
结果（如果您打开浏览器， ole）是一个错误，指出：
Highcharts错误＃22：www.highcharts.com/errors/22
我试过转换坐标系，而改为绘制X& Y：
var pos = chart.fromLatLonToPoint（{lat：json [i] .latitude，lon：json [i] .longitude}） ;
但是这并不奏效，点，为X返回0，为Y返回null。我也尝试更改地图类型，但这也不起作用。
我可以创建一个只是地图点没有深入，但我似乎无法像效果（颜色）与钻取具有相同的效果和点的热点图层。我没有看到他们身边任何地方列出的关于点和深入/着色部分的限制。
以前任何人都可以做到这一点吗？我想这些地图图层一般，这是不可行的？
要使用经度和纬度，你需要包括Proj4js。此外，您需要在坐标系之间进行手动转换，或者使用 Highmaps地图集合中的地图。例如：
< script src =http：//.../proj4.js>< /脚本>
< script src =http://code.highcharts.com/mapdata/countries/us/us-all.js>< / script>
在您的案例中，深入示例包含 Highchart.maps > Highcharts.geojson 中包含额外的属性（ drilldown 和值），如下所示：
var data = Highcharts.geojson（Highcharts.maps ['countries / us / us -所有']）;
$ b $ .each（data，function（i）{
this.drilldown = this.properties ['hc-key'];
this.value = i; //非随机伪造数据
}）;
$（'＃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'
}]
}）;
不幸的是，在两个级别（顶部和向下钻取）和您的附加点系列I遇到各种问题。在 data 和 mapData 中奇怪地包含相同的信息似乎可以避免它们，所以我最终采用了这种方法： / p>
var mapData = Highcharts.maps ['countries / us / us-all']，
myData = Highcharts.geojson （Highcharts.maps [ '国家/ US / US-所有']）;
$ .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'
}]
}）;
请参阅这个更新的JSFiddle 现在看起来如何与钻取，经度/经度支持和点系列。
我还将包括这个JSFiddle ，它使用更标准的 data 方法克隆 mapData ），但存在各种各样的问题，我不太清楚它们为何发生。
I'm having a problem using Highmaps to display both heat map data as well as points on a map. Here is a example:
This is the just out of the box example for a US drill down map ( http://www.highcharts.com/maps/demo/map-drilldown ) but I've modified it so that if you drill down into the state of Illinois I'm attempting to add a single point (within a series) to the map.
Below is the snippet I'm using to do this:
chart.addSeries({
id: 'points',
type: 'mappoint',
name: 'Store Data',
color: Highcharts.getOptions().colors[8],
data: [{
name: 'Point 1',
lat: 40.0633,
lon: -88.2498
}]
});
The result (if you open your browsers console) is an error stating:
Highcharts error #22: www.highcharts.com/errors/22
I've tried converting coordinate systems and instead plot X & Y:
var pos = chart.fromLatLonToPoint({
lat: json[i].latitude,
lon: json[i].longitude
});
But that didn't work as it fails to convert the points, returning 0 for X and null for Y. I've also tried changing the map type but that doesn't work either.
I can create a map of just points without drill down but I cannot seem to get layers of heat map like effect (colors) with drill downs that have the same effect and points. I don't see a limitation listed anywhere on their side about points and drill down / coloring segments.
Has anyone been able to get this working before? Am I thinking of these map layers to generically and this just isn't doable?
To use latitude and longitude you need to include Proj4js. Also, you need to either do manual conversion between coordinate systems, or be using maps from the Highmaps map collection. For example:
<script src="http://.../proj4.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
In your case the drilldown example wraps the Highchart.maps in Highcharts.geojson to include extra attributes (drilldown and value), like this:
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'
}]
});
This seems to cause Highmaps to not recognize the map as one from the collection, and you are therefor not allowed to use latitude and longitude with this method.
Instead, you can use Highcharts.maps as it is, and use both mapData and data with joinBy to attach extra data that way, while keeping the latitude/longitude functionality, like this:
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'
}]
});
Unfortunately, in using this technique on two levels (top and drilldown) and your additional point-series I encountered all kinds of problems. Strangely including the same information in both data and mapData seem to avoid them, so I ended up with this approach:
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'
}]
});
See this updated JSFiddle of how it currently looks with drilldown, latitude/longitude support and point series.
I'll also include this JSFiddle, which uses the more standard data approach (instead of cloning mapData), but has all kinds of problems which I'm not quite sure why they happen.
这篇关于在Highmaps中显示点和向下钻取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
