0

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

Highcharts 地图明细

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 数据而不是虚假数据的任何想法？

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 回答