带有 drilledDown 的 HighMaps

Question

我在我的应用程序中使用高图并启用了向下钻取，它适用于为美国提供的样本数据。

但它不适用于斯里兰卡的数据。可能是什么问题？

这是我的代码：

  $('#container').highcharts('Map', {
        chart : {
            events: {
                drilldown: function (e) {

                    if (!e.seriesOptions) {
                        var chart = this,
                            mapKey = 'countries/lk/' + e.point.drilldown + '-all',
                            // Handle error, the timeout is cleared on success
                            fail = setTimeout(function () {
                                if (!Highcharts.maps[mapKey]) {
                                    chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);

                                    fail = setTimeout(function () {
                                        chart.hideLoading();
                                    }, 1000);
                                }
                            }, 3000);

                        // Show the spinner
                        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

                        // Load the drilldown map
                        $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {

                            data = Highcharts.geojson(Highcharts.maps[mapKey]);

                            // Set a non-random bogus value
                            $.each(data, function (i) {
                                this.value = i;
                                  console.log(i);
                            });


                            // Hide loading and add series
                            chart.hideLoading();
                            clearTimeout(fail);
                            chart.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                data: data,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                        });
                    }


                    this.setTitle(null, { text: e.point.name });
                },
                drillup: function () {
                    this.setTitle(null, { text: 'Sri Lanka' });
                }
            }
        }

JSFiddle Link

Answer 1

Highmaps Map Collection for Sri Lanka. If you scroll down the page you can see that at the moment 中不存在向下钻取数据，数据低于国家级别（例如 admin2 级别）的国家仅有加拿大、德国、法国、荷兰、挪威、美国。

当您单击一个地区时，fiddle 正在尝试从相应的 URL 检索数据：

mapKey = 'countries/lk/' + e.point.drilldown + '-all',

对于斯里兰卡，它失败了，因为每个地区的 JS 文件都不存在。

the Highmaps docs 中有更多关于创建地图的信息：

Highmaps loads its maps from GeoJSON, an open standard for description of geographic features. Most GIS software supports this format as export from for instance Shapefile or KML export. Read more in the API reference and see the live demo.

There are three basic sources for your map:

Use our Map collection. Read the tutorial article on the map collection to get started.

Find an SVG map online and convert it using our (experimental) online converter.

Create your own map from scratch using an SVG editor, then convert them online. Read our tutorial on Custom maps for Highmaps.

大约 the Highmaps Maps Collection:

For your convenience, Highmaps offers a free collection of maps, optimized for use with Highmaps. For common maps, it saves you the trouble of finding or drawing suitable SVG or GeoJSON maps.

For Admin2, we have only compiled selected countries, and these maps are created from national files with their own license which is specified on the SVG map and in the other format files as meta data. If you miss your country, please contact us and we'll try to find a suitable shapefile and generate more maps.

带有 drilledDown 的 HighMaps

HighMaps with drilledDown

javascript

angularjs

highmaps