Question

使用Highcharts Map样本，想看看多个系列如何使用地图。这是美国人口密度图，另一个系列显示州首府：

        $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-capitals.json', function (dcap) {
            $.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function (data) {
                // Make codes uppercase to match the map data
                $.each(data, function () {
                    this.code = this.code.toUpperCase();
                });
                if (_dochartwhenready === true) {
                    if (_domap === true) {
                        var mapobject = {

                            chart: {
                                map: 'countries/us/us-all',
                                borderWidth: 1,
                                renderTo: 'container'
                            },

                            title: {
                                text: 'US population density (/km²)'
                            },

                            exporting: {
                                sourceWidth: 600,
                                sourceHeight: 500
                            },

                            legend: {
                                layout: 'horizontal',
                                borderWidth: 0,
                                backgroundColor: 'rgba(255,255,255,0.85)',
                                floating: true,
                                verticalAlign: 'top',
                                y: 25
                            },

                            mapNavigation: {
                                enabled: true
                            },

                            colorAxis: {
                                min: 1,
                                type: 'logarithmic',
                                minColor: '#EEEEFF',
                                maxColor: '#000022',
                                stops: [
                                    [0, '#EFEFFF'],
                                    [0.67, '#4444FF'],
                                    [1, '#000022']
                                ]
                            },

                            series: [{
                                animation: {
                                    duration: 1000
                                },
                                data: data,
                                joinBy: ['postal-code', 'code'],
                                dataLabels: {
                                    enabled: true,
                                    color: '#FFFFFF',
                                    format: '{point.code}'
                                },
                                name: 'Population density',
                                tooltip: {
                                    pointFormat: '{point.code}: {point.value}/km²'
                                }
                            },
                                {
                                    animation: {
                                        duration: 3000
                                    },
                                type: 'mappoint',
                                name: 'Cities',
                                color: Highcharts.getOptions().colors[1],
                                data: dcap,
                                joinBy: ['lat', 'lat', 'lon', 'lon'],
                                dataLabels: {
                                    enabled:true,
                                    color: '#ccccc',
                                    format: '{point.capital}'
                                },
                                tooltip: {
                                    pointFormat: '{point.capital}: {point.population}'
                                }

                            }]

                        };

                        _map = new Highcharts.Map(mapobject);

                    }

这有效 - 部分：

工具提示完全按预期工作。但是，地图上只显示少数州首府名称。怎么样？

Answer 1

这仅仅是由于缩放级别，显然。另外，我不建议在lat和long上使用joinBy，因为它可能会以非常小的小数变化。

这里有一个工作示例：https://jsfiddle.net/3ttmyxmo/

如果放大，您会看到弹出的大写名称。

我在邮政编码和abrev而不是lat long上使用了joinBy：

{
    animation: {
        duration: 3000
    },
    type: 'mappoint',
    name: 'Cities',
    color: Highcharts.getOptions().colors[1],
    data: capitals,
    joinBy: ['postal-code', 'abrev'],
    dataLabels: {
        enabled:true,
        color: '#ccccc',
        format: '{point.capital}'
    },
    tooltip: {
        pointFormat: '{point.capital}: {point.population}'
    }
}

Answer 2

问题的根源是数据标签重叠。此代码强制Highcharts显示所有这些：

  plotOptions: {
    series: {
      dataLabels: {
        allowOverlap: true
      }
    }
  },

现场演示： documentation

API参考： https://jsfiddle.net/BlackLabel/vtwv061b/

Highcharts地图标签并未全部显示

2 个答案: