如何动态添加数据到钻取地图？

Question

在这里，我再次使用另一个Highmaps查询...我已经实现了这一切，但是......我现在想要使用向下钻取功能来显示一个自定义的“子地图”，并且我要添加 - 动态 - 添加一些点位置，例如一个区域）在指定的点sn地图，它将显示滚动工具提示中的相关数据...

下面的js小提示显示了基本的想法，虽然钻取“数据”显然不是所需要的......不知何故，每个下钻必须显示相关的地图轮廓（这里不是每个都使用的相同）然后我需要添加的地方地点，它们在地图上的位置以及每个地点的一些数据。

我不希望任何人能够用它来创造一个工作小提琴，但如果你能指出我正确的方向我会感激 - 我相信如果轻推我最终能到达那里......

的jsfiddle：https://jsfiddle.net/philu/8v7xbLoy/5/

    Highcharts.setOptions({
        "lang": {"drillUpText": "< Back to U.K. map"},
     });
     $('#container').highcharts("Map", {
        "title": {
           "text": "UK"
        },
        "series": [
            {
              "name": "Today",
                "type": "map",
                "tooltip": {
                   "pointFormat": "{point.name}"
                },
                "dataLabels": {
                   "enabled": true,
                   "useHTML": true,
                   "color": '#FFFFFF',
                   "formatter": function () {
                      return this.point.name + '<br>Some data...'
                   }
                },
                "data": [
                    {
                          "color": "#ffcccc",
                       "drilldown": "England",
                       "name": "England",
                        "path": "M0,-994L204,-994L203,-480,0,-477z"
                    },
                    {
                       "color": "#ccffcc",
                       "drilldown": "Wales",
                       "name": "Wales7",
                        "path": "M204,-994L455,-994L457,-477,203,-480z"
                    }
                ]   
            }
        ],
        "drilldown": {
            "series": [
            {
               "id": "England",
               "name": "England",
               "type": "map",
               "tooltip": {
                  "headerFormat": "",
                  "pointFormat": "{point.name}"
               },
               "data": [
                  {
                     "name": "path4550",
                     "path": "M0,-861,2,-514,400,-292,560,-388,885,-203,1000,-627,651,-827,610,-977,234,-802Z"
                  }
               ]
            },
            {
               "id": "Wales",
               "name": "Wales",
               "type": "map",
               "tooltip": {
                  "headerFormat": "",
                  "pointFormat": "{point.name}"
               },
               "data": [
                  {
                     "name": "path4550",
                     "path": "M0,-861,2,-514,400,-292,560,-388,885,-203,1000,-627,651,-827,610,-977,234,-802Z"
                  }
               ]
            }
           ]
        }
     });

Answer 1

您可以创建自定义向下钻取并添加map和mappoint系列类型：

chart: {
    events: {
        drilldown: function(e) {
            if (!e.seriesOptions) {
                var chart = this,
                    drilldowns = {
                        'England': {...},
                        'England-points': {
                            type: 'mappoint',
                            data: [{
                                name: 'London',
                                x: 150,
                                y: -500
                            }, {
                                name: 'Birmingham',
                                x: 500,
                                y: -600
                            }]
                        },
                        'Wales': {...},
                        'Wales-points': {
                            type: 'mappoint',
                            data: [{
                                name: 'London',
                                x: 150,
                                y: -500
                            }, {
                                name: 'Birmingham',
                                x: 500,
                                y: -600
                            }]
                        }
                    },
                    series = drilldowns[e.point.name],
                    series2 = drilldowns[e.point.name + '-points'];

                chart.addSingleSeriesAsDrilldown(e.point, series);
                chart.addSingleSeriesAsDrilldown(e.point, series2);
                chart.applyDrilldown();
            }
        }
    }
}

实例：https://jsfiddle.net/BlackLabel/bpq128jw/

API参考：https://api.highcharts.com/highmaps/chart.events.drilldown