我想使用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%,除德克萨斯州外的所有其他州均已删除
- 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
}
];
字符串
1条答案
按热度按时间4xrmg8kj1#
这与异步操作有关。要确保在添加系列之前完成追溯,建议使用
afterDrilldown()
事件。如果要删除该系列,可以使用afterDrillUp()
事件。字符串
演示:https://jsfiddle.net/BlackLabel/kpcuszy0/