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
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/
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



Comments
Post a Comment