Question

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

我收到来自我的第二个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中向下钻取地图

1 个答案: