Question

在这里，我再次提出另一个Highmaps查询…。我已经实现了所有功能，但是…现在我想使用向下钻取功能来显示自定义的“子地图”，并在其上动态添加一些点位置（例如，城镇内的城镇）一个区域）在地图上的指定点，它将在翻转时的工具提示中显示相关数据...

下面的js小提琴显示了基本思想，尽管明细化“数据”显然不是必需的...以某种方式，每个明细化都必须显示相关的地图轮廓（此处未使用相同的轮廓），然后在某个地方需要添加位置，它们在地图上的位置以及每个位置的一些数据。

我不希望任何人能够使用它来创建一个有效的小提琴，但是如果您能以正确的方向指点我，我将不胜感激–我相信，如果轻推...

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

    Highcharts.setOptions({
        "lang": {"drillUpText": "&lt; 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

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

1 个答案: