2

Highmaps を使用してヒート マップ データとマップ上のポイントの両方を表示するのに問題があります。次に例を示します。

http://jsfiddle.net/3se9q3uq/

これは、米国のドリル ダウン マップ ( http://www.highcharts.com/maps/demo/map-drilldown ) のすぐに使える例ですが、次の状態にドリル ダウンするとイリノイ マップに 1 つのポイント (シリーズ内) を追加しようとしています。

以下は、これを行うために使用しているスニペットです。

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

結果 (ブラウザのコンソールを開いた場合) は、次のようなエラーになります。

ハイチャート エラー #22: www.highcharts.com/errors/22

座標系の変換を試み、代わりに X & Y をプロットしました。

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

しかし、ポイントの変換に失敗し、X に対して 0 を返し、Y に対して null を返すため、それは機能しませんでした。マップ タイプを変更しようとしましたが、それも機能しません。

ドリルダウンせずにポイントだけのマップを作成できますが、同じ効果とポイントを持つドリルダウンで効果 (色) のようなヒート マップのレイヤーを取得できないようです。ポイントとドリルダウン/カラーリングセグメントに関する制限はどこにも記載されていません。

以前にこれを機能させることができた人はいますか？これらのマップレイヤーを一般的に考えているのですが、これは実行できませんか?

4

1 に答える 1

8

緯度と経度を使用するには、Proj4js を含める必要があります。また、座標系間の手動変換を行うか、Highmaps マップ コレクションのマップを使用する必要があります。例えば：

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

あなたの場合、ドリルダウンの例は、次のように、追加の属性 (および)を含めるためにラップHighchart.mapsします。Highcharts.geojsondrilldownvalue

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 がマップをコレクションのマップとして認識しないようです。そのため、このメソッドで緯度と経度を使用することはできません。

代わりに、次のように緯度/経度機能を維持しながら、そのまま使用し、とwithHighcharts.mapsの両方を使用して追加のデータを追加できます。mapDatadatajoinBy

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

残念ながら、この手法を 2 つのレベル (トップとドリルダウン) と追加のポイント シリーズで使用すると、あらゆる種類の問題に遭遇しました。不思議なことに両方に同じ情報を含めて、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'
    }]
});

ドリルダウン、緯度/経度のサポート、ポイント シリーズで現在どのように見えるかについては、この更新された JSFiddleを参照してください。

また、この JSFiddleも含めます。これは、( clone の代わりに) より標準的なdataアプローチを使用しますmapDataが、すべての種類の問題があり、なぜそれらが発生するのかよくわかりません。

于 2015-03-15T11:39:56.387 に答える