0

PHP を使用して、米国のメイン マップとドリル ダウン マップ用の JSON ファイルを生成します。次の例を使用して、両方のデータ ポイントをマップに組み込みたいと思います。

ハイチャート マップのドリルダウン

Highcharts フォーラムの誰かがこれを提案しました:

簡単なアイデアは、ドリルダウンを使用せず、シリーズを追加および削除することで回避策を開発することです。これらの呼び出しは ajax 呼び出しを使用できるため、データは非同期に含まれます。

次のコードを使用して、メイン マップ データを組み込むことができました。

main.js マイページで呼び出されるコード

function create_chart() {
        $.getJSON('/includes/data/states.json', function(data) {
                $('#container').highcharts('Map', {
                        series: [{
                            name: 'States',
                            data: data,
                            mapData: Highcharts.maps['countries/us/us-all'],
                            joinBy: ['hc-key', 'code'],
                            type: 'map',
                        }],
                        });
                });
        }
        $(document).ready(create_chart);

メインマップデータのサンプル (states.json)

[
    {
        "drilldown": "ak",
        "code": "us-ak",
        "value": "1"
    },
    {
        "drilldown": "al",
        "code": "us-al",
        "value": "22"
    },
    {
        "drilldown": "ar",
        "code": "us-ar",
        "value": "7"
    },
...
]

ドリルダウン項目を保持する 2 番目の JSON ファイルからのデータを含めることにバグがあります。形式は次のとおりです。

ドリルダウン データのサンプル (counties.json)

[
    {
        "code": "us-de-005",
        "name": "Sussex County, DE",
        "value": "2"
    },
    {
        "code": "us-al-03",
        "name": "Baldwin County, AL",
        "value": "1"
    },
    {
        "code": "us-al-39",
        "name": "Covington County, AL",
        "value": "2"
    },
...
]

現在ダミーのランダム データに設定されている例で、次の行を調整する必要があると想定します。

46 ～ 51 行目

                    data = Highcharts.geojson(Highcharts.maps[mapKey]);
                    // Set a non-random bogus value
                    $.each(data, function (i) {
                        this.value = i;
                    });

偽のデータの代わりにjsonデータを挿入する方法についてのアイデアはありますか?

4

1 に答える 1

1

したがって、コードの次の部分があります。

$.getScript('http://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                        var mapData = Highcharts.geojson(Highcharts.maps[mapKey]); // namespace

                        // Set a non-random bogus value
                        $.each(data, function (i) {
                            this.value = i;
                        });
                        ...
 });

マップをロードします。ここで、データを設定する代わりに、別の AJAX 呼び出しを行います。

$.getScript('http://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                        data = Highcharts.geojson(Highcharts.maps[mapKey]);

                        // get data:
                        $.getJSON("myURL?mapkey=" + mapKey, function(data_2) { 
                            // assign your data points to the series
                            var data = []; 
                            ...

                            // update chart in the callback:

                            // Hide loading and add series
                            chart.hideLoading();
                            clearTimeout(fail);
                            chart.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                joinBy: ['hc-key', 'code'],
                                type: 'map',
                                data: data,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                        });
                        ...
 });
于 2015-03-18T10:59:20.503 に答える