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