英文:
HighCharts Map Drilldown - Map is rotating 180 degrees after Drillup
问题
我正在使用HighCharts Map，并使用JSON数据来渲染美国地图（我使用了一个SVG文件，并使用https://highcharts.github.io/map-from-svg/工具将SVG转换为JSON）。我正在实现地图中的下钻功能。下钻功能有效，但当我点击面包屑中的“USA”时，地图会旋转180度。预期行为应该是：下钻后，美国地图不应该颠倒。我不确定我的代码有什么问题。是否可以提供指导以解决此问题？
要在fiddle中重现此问题 -
- 点击美国地图中的任何州（例如加利福尼亚）。
- 现在在面包屑中点击“USA”。
- 问题 - 美国地图现在颠倒了。
完整代码 - https://jsfiddle.net/seaxfdrz/7/
代码片段如下 -
Highcharts.mapChart('container', {
chart: {
events: {
drilldown,
afterDrillUp
}
},
title: {
text: 'Highcharts Map Drilldown'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: mapJason,
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
breadcrumbs: {
floating: true,
relativeTo: 'spacingBox'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
希望这能帮助您解决问题。
英文:
I am using HighCharts Map and using json data to render the USA map (I have used an SVG file and converted the SVG into json using https://highcharts.github.io/map-from-svg/ tool). I am implementing drill-down feature in the map. The drill-down works but when I click "USA" in the breadcrumb, the map rotates by 180 degrees. The expected behavior should be - The USA map should not be upside down after the drill up. I am not sure what's wrong with my code. Can anyone please provide guidance to fix the issue?
To reproduce the issue in the fiddle -
- Click on any state in the USA map (i.e California)
- Now click "USA" in the breadcrumbs
- Issue - USA map is upside down now.
The complete code - https://jsfiddle.net/seaxfdrz/7/
The code snippet is -
Highcharts.mapChart('container', {
chart: {
events: {
drilldown,
afterDrillUp
}
},
title: {
text: 'Highcharts Map Drilldown'
},
//mapView,
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: mapJason,
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
breadcrumbs: {
floating: true,
relativeTo: 'spacingBox'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
答案1
得分: 1
你想要从你的自定义SVG地图中进行深入钻取，该地图没有任何投影到TopoJSON州地图中，后者具有内置投影。然后，在进行钻取后，投影不会更改，而且会尝试将投影应用于你的自定义SVG地图。要解决这个问题，只需在钻取后将mapView.projection.hasCoordinates标志更改为false。
在线演示： https://jsfiddle.net/BlackLabel/gzqfsv63/
英文:
You want to do a drill down from your custom SVG map, which doesn't have any projection into the TopoJSON state map, which has its built-in projection. Then, after drilling up projection is not changed and it is trying to apply projection to your custom SVG map. To resolve this problem simply change mapView.projection.hasCoordinates flag to false after drilling up.
Live demo: https://jsfiddle.net/BlackLabel/gzqfsv63/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论