3

Highmaps / highcharts は、ブラウザーなどでマップをレンダリングする javascript/jquery アダプターです。

1 つの国が強調表示された地図がありますが、(世界の) 地図の縮尺は、地図が問題の国にロードされた後に拡大したいほどです。

APIを見ると、これが可能であると確信しています。

ロード時にカスタム関数を実行できるように、イベント リスナーがあります。この例で示されているように、ロード時にシリーズが追加されます ( Js fiddle )

さらにmapZoom、次の引数を使用してズームするポイントを指定できるメソッドがあります。

mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])

しかし、このメソッド onload を呼び出そうとすると (以下の私のコード試行、ここでは JS フィドル)、何も起こりません。

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000,
                type: 'logarithmic'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series : [{
                data : data,
                mapData: Highcharts.maps['custom/world-highres'],
                joinBy: ['iso-a2', 'code'],
                name: 'Population density',
                allowPointSelect: true,
                cursor: 'pointer',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                tooltip: {
                    pointFormat: '{point.id} {point.name}',
                    valueSuffix: '/km²'
                }
            }]
        });

    });
});
4

3 に答える 3

9

mapZoomはオブジェクトに属するメソッドchartなので、en イベント ( load)として呼び出すには、thisキーワードを使用して呼び出す必要があります。

次のようにコードを編集できます ( JSFiddle ):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

または、jQuery 参照 ( JSFiddle )を使用していつでも呼び出すことができます。

$('#container').highcharts().mapZoom(0.5, 100, 100);
于 2015-03-09T04:35:10.840 に答える