在 Highcharts 地图中的钻取事件后添加数据系列的正确方法是什么？

Question

我想使用带有钻取模块的 Highcharts 地图，使用户能够在全球地图上查看其所有联系人，然后单击钻取到大陆级别并仅查看该大陆中的联系人，然后单击钻取到国家/地区，只能看到该国家/地区的联系人。

我的问题是我不知道何时或如何添加联系人数据系列。按照我现在的方式，有些东西阻止了向下钻取的完成。

我创建了一个简单的示例，从美国国家/地区级别开始，然后深入到各州。我只是在进行深入研究后才添加联系人。这是一个小提琴：https://jsfiddle.net/PolarIce/50ukqjsh/21/

重现步骤：

1. 加载页面：https://jsfiddle.net/PolarIce/50ukqjsh/21/
2. 单击德克萨斯州
3. 请注意，地图缩放了 90%，但周围各州的边缘仍然可见。
4. 注意联系人显示为点
5. 注释掉第 53-56 行
6. 运行代码
7. 单击德克萨斯州
8. 注意所有其他状态都已删除，但当然没有显示任何联系方式
9. 取消注释添加联系人系列的代码
10. 将超时增加到 3000 MS
11. 运行代码
12. 单击德克萨斯州
13. 请注意，向下钻取已完成 100%，除德克萨斯州外的所有其他州均已删除
14. 3秒后，联系人出现

我认为我遗漏了一些东西，因为文档中的任何地方都没有列出设置 3 秒超时。我确实用 1500 MS 尝试过，也有效，但这仍然是一个要求吗？

相关代码：

    setTimeout(() => {
    addContactSeries(chart);
      }, 0);
            
        

   const addContactSeries = function(chart) {

    chart.addSeries({ 
    name: "contacts",
    type: 'mappoint',
    data: contacts,
    dataLabels: {
                enabled: true,
                format: '{point.name}'
            }

  
      });

    }

const contacts = [
    {
    "city": "Dallas",
    "country": "United States of America",
    "lat": 32.998524,
    "lon": -96.84046,
    "name": "Contact 1",
    "subregion": "Texas",
    "z": 1
    },
    {
    "city": "New York",
    "country": "United States of America",
    "lat": 40.728928,
    "lon": -73.99173,
    "name": "Contact 2",
    "subregion": "New York",
    "z": 1
    },
    {
    "city": "Liverpool",
    "country": "United Kingdom",
    "lat": 53.405323,
    "lon": -2.9935844,
    "name": "Contact 3",
    "subregion": "Liverpool",
    "z": 1
    },
    {
    "city": "Llandudno",
    "country": "United Kingdom",
    "lat": 53.328495,
    "lon": -3.82909,
    "name": "Contact 4",
    "subregion": "Wales [Cymru GB-CYM]",
    "z": 1
    }
];

Answer 1

这与异步操作有关。为了确保在添加系列之前完成向下钻取，建议的方法是使用

afterDrilldown()

事件。如果您想删除该系列，可以利用

afterDrillUp()

事件。

 chart: {
        events: {
            drilldown,
            afterDrillUp,
            afterDrilldown() {
                addContactSeries(this);
            }
        }
    },

演示： https://jsfiddle.net/BlackLabel/kpcuszy0/