将 JSON 数据动态加载到 Highcharts Drill Down 地图中

Question

我使用 PHP 为我的主要美国地图和下钻地图生成 JSON 文件。我想使用以下示例将两个数据点合并到地图中：

Highcharts 论坛上有人建议：

The simple idea is to not use drilldown, but to develop workaround by adding and removing series - those calls can be using ajax calls, so data will be included asynchronously.

我能够使用以下代码合并主要地图数据：

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"
    },
...
]

我在包含我的第二个 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 数据而不是伪造数据有什么想法吗？

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

将 JSON 数据动态加载到 Highcharts Drill Down 地图中

Load JSON Data into Highcharts Drilldown map Dynamicly

ajax

jquery

json

highcharts

highmaps