在Highcharts Maps中的深入事件之后添加数据系列的正确方法是什么?

yjghlzjz  于 2023-08-05  发布在  Highcharts
关注(0)|答案(1)|浏览(156)

我想使用HighchartsMap与Drilldown模块,使用户能够查看他们的所有联系人在全球Map上,然后单击深入到大陆级别,只看到该大陆的联系人,然后单击深入到一个国家,只看到该国家的联系人。
我的问题是我不知道何时或如何添加联系人的数据系列。我现在这样做的方式是,有些东西阻止了深入分析的完成。
我创建了一个简单的示例,从美国国家级别开始,然后深入到各州。我只是在深入分析之后才添加联系人。这里有一个小提琴:https://jsfiddle.net/PolarIce/50ukqjsh/21/
复制步骤:
1.加载页面:https://jsfiddle.net/PolarIce/50ukqjsh/21/
1.单击德克萨斯州
1.请注意,Map会放大90%,但周围州的边缘仍可见。
1.请注意,触点显示为点
1.注解掉第53-56行
1.运行代码
1.单击德克萨斯州
1.请注意,所有其他状态都被删除了,但当然不会显示任何联系
1.取消添加联系人系列的代码的注解
1.将超时时间增加到3000毫秒
1.运行代码
1.点击德克萨斯
1.请注意,向下钻取已完成100%,除德克萨斯州外的所有其他州均已删除

  1. 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
    }
];

字符串

4xrmg8kj

4xrmg8kj1#

这与异步操作有关。要确保在添加系列之前完成追溯,建议使用afterDrilldown()事件。如果要删除该系列,可以使用afterDrillUp()事件。

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

字符串
演示:https://jsfiddle.net/BlackLabel/kpcuszy0/

相关问题