javascript - 使用 JSON 文件 Highcharts 的钻取图

Question

我想按照这个美国地图钻取示例使用 Highcharts 进行地图钻取：US Map Drilldown Highcharts

这是我的向下钻取 javascript 文件的示例

var data = Highcharts.geojson(Highcharts.maps['countries/my/my-all']),
    separators = Highcharts.geojson(Highcharts.maps['countries/my/my-all'], 'mapline'),
    // Some responsiveness
    small = $('#container').width() < 400;

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

// Instantiate the map
Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    var chart = this,
                        mapKey = 'countries/my/' + e.point.drilldown + '-all',
                        // Handle error, the timeout is cleared on success
                        fail = setTimeout(function () {
                            if (!Highcharts.maps[mapKey]) {
                                chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                                fail = setTimeout(function () {
                                    chart.hideLoading();
                                }, 1000);
                            }
                        }, 3000);

                    // Show the spinner
                    chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                    // Load the drilldown map
                    $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

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

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

                        // Hide loading and add series
                        chart.hideLoading();
                        clearTimeout(fail);
                        chart.addSeriesAsDrilldown(e.point, {
                            name: e.point.name,
                            data: data,
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        });
                    });
                }

                this.setTitle(null, { text: e.point.name });
            },
            drillup: function () {
                this.setTitle(null, { text: '' });
            }
        }

这是 states.json 的示例代码

 "features": [
    {
      "type": "Feature",
      "id": "MY.SA",
      "properties": {
        "hc-group": "admin1",
        "hc-middle-x": 0.32,
        "hc-middle-y": 0.6,
        "hc-key": "my-sa",
        "hc-a2": "SA",
        "labelrank": "6",
        "hasc": "MY.SA",
        "alt-name": "North Borneo",
        "woe-id": "2346310",
        "subregion": null,
        "fips": "MY16",
        "postal-code": "SA",
        "name": "Sabah",
        "country": "Malaysia",
        "type-en": "State",
        "region": null,
        "longitude": "117.095",
        "woe-name": "Sabah",
        "latitude": "5.31115",
        "woe-label": "Sabah, MY, Malaysia",
        "type": "State"
      },

这是 District.json 中地区的示例代码

 {
      "type": "Feature",
      "properties": {
        "GID_0": "MYS",
        "NAME_0": "Malaysia",
        "GID_1": "MYS.13_1",
        "NAME_1": "Sabah",
        "NL_NAME_1": null,
        "GID_2": "MYS.13.1_1",
        "NAME_2": "Beaufort",
        "VARNAME_2": null,
        "NL_NAME_2": null,
        "TYPE_2": "Daerah",
        "ENGTYPE_2": "District",
        "CC_2": null,
        "HASC_2": "MY.SA.BF",
        "ISO": "MY-12",
        "ISO_district": "MY-12.1"
      },

我需要使用 getJSON 函数吗？有人可以帮我如何在 javascript 文件中进行声明吗？

标签： javascripthighcharts