I am currently utilizing Highcharts for the purpose of showcasing an interactive map with custom countries. I have a specific requirement to enable the drilldown functionality, which involves clicking on a country to zoom in on another map displaying internal states of that country.
In Angular, the recommended approach for achieving this is to include a drilldown event handler within a chartOptions object. This involves loading the map data and then invoking a function to incorporate the map data as drilldown in the chart.
export class MapComponent implements OnInit {
public chartOptions: Highcharts.Options = {
chart: {
events: {
drilldown(e) {
// At this point, "this" refers to a Highcharts.MapChart object.
const chart = this as any;
const mapKey = `countries/ca/${e.point.drilldown}-all`;
const mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`);
const provinceData = Highcharts.geojson(mapData);
provinceData.forEach((el: any, i) => { el.value = i; });
chart.addSeriesAsDrilldown(e.point, { name: e.point.name, data: provinceData });
}
}
}
}
}
However, my scenario involves using custom map data generated from an SVG file stored in a mongo db instead of the provided map data from Highcharts. This data is fetched from the database during startup and stored as a property in my MapComponent. Consequently, I need to access this property using "this" within the scope of the component in the event handler function.
export class MapComponent implements OnInit {
private drilldownData: Highcharts.SeriesMapOptions = { ... };
public chartOptions: Highcharts.Options = {
chart: {
events: {
// Here "this" is within the scope of the MapComponent.
drilldown: this.handleDrilldown
}
}
}
private handleDrilldown(e: Highcharts.DrilldownEventObject): void {
// At this point, "this" represents a Highcharts.MapChart object.
let chart = this as any;
chart.addSeriesAsDrilldown(e.point, { name: e.point.name, data: this.drilldownData });
}
}
I've experimented with various ways to call the drilldown method such as
drilldown: event => this.handleDrilldown(event)drilldown: this.handleDrilldown.bind(this)drilldown: function(event) { this.handleDrilldown(event) }