weizhenye/vue-highcharts

Drilldown in Map

Closed this issue · 1 comments

lindsayct commented

Hi @weizhenye
I'm trying to use the Drilldown in Map, but cannot get it working.
like: https://www.highcharts.com/maps/demo/map-drilldown
Do you have a example this? Please.

Tks.

weizhenye commented

I guess the reason you're not getting it work is the map data file. As I commented, https://code.highcharts.com/mapdata/countries/us/us-all.js is a JavaScript file, it sets map data to the global variable Highcharts.maps["countries/us/us-all"] by default, which is not work well with ES6 import. What's more, in your example, drilldown map data is loaded dynamically in runtime like $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {, which means you must have Highcharts global variable.

So I have two suggestions:

  1. Set Highcharts to window as a global variable after you import highcharts. By this way dynamically loaded map data can be set to your highcharts instance. That may require do some config with webpack.
  2. Go to https://code.highcharts.com/mapdata/ and you can find map data is also provided in GeoJSON format, loading JSON in runtime is more convenient than JavaScript. But cross-origin requests to those GeoJSON is not allowed, so you need to download map data you need and serve them yourself.