angular - Highcharts Map Map-Pies Angular2 Typescript not working -


i'm trying build highcharts map (europe map) map-pies angular 2 in typescript.

i took demo example -> https://www.highcharts.com/maps/demo/map-pies

enter image description here

what managed:

1) adding europe map, join data , display them in tooltip.

2) draw pies correct data in different sizes (top-left corner always)

but failed set position of these pies (and let them stay when map zoomed or moved)

i tried proj4.js libary -> https://www.highcharts.com/docs/maps/latlon

i have serveral issues:

1) how can extend highcharts.seriestype in demo "new map-pie series type allows lat/lon center option"

2) clip: true, // map navigation - not exist in angular 2 ts

3) var point = chart.fromlatlontopoint(options.center); - not exist in angular 2 ts

4) there no sizeformatter: function () , no getcenter: function ()

5) pass lat/lon center doesn't work because of 1)

center: {             lat: centerlat + (pieoffset.lat || 0),             lon: centerlon + (pieoffset.lon || 0)         } 

6) because of 1) & 2) set pies position on map without lat/lon x/y coordinate country on map - , because of if map moved position wrong

did tried before in angular2 ts , did not failed? help


what did far: https://jsfiddle.net/0jhqmaeu/

enter image description here


solved workaround:

1) add pies plotx/ploty of state

2) add eventlistener mouseup (detect map movement)

3) add eventlistener xaxis.events.aftersetextremes (detect map zoom)

4) event callback remove pies , add on new position (states x/y position)

5) optional: set visibility if state visible

enter image description here


Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -