Question

如何在给定图表div容器中调整地图形状的大小？我没有看到任何设置比例的方法。我试图做类似demo的事情，但只使用几个状态（彼此接壤）。当我删除未使用的状态时，剩余的状态在给定的图表区域内仍然显得很小。向下钻取到状态时，您可以看到适合容器大小的放大版本。现在，当您单击“向上钻取”按钮时，您会看到地图路径现在填充图表容器。这是一个粗略的example。这是div容器：

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

以下是用于生成图表的代码（请参阅测试数据的jsfiddle）：

    // Set drilldown pointers
    $.each(Highcharts.maps['US-FL'], function () {
        this.drilldown = this.id;
    });

    // Add some real data
    $.each(Highcharts.maps['US-FL'], function () {
        //this.value = Math.round(Math.random() * 100);
        var theID = this.id.toString();
            var theData;
            data1.some(function (arrayItem) {
                var x = arrayItem[0];
                console.log(x);
                if (x == theID) {
                    theData = arrayItem[1];
                    return theData;
                }
            });
            this.value = theData;
    });

    $.each(drilldownSeries, function () {
        $.each(this.data, function () {
            var theID = this.id.toString();
            var theData;
            data1.some(function (arrayItem) {
                var x = arrayItem[0];
                //console.log(x);
                if (x == theID) {
                    theData = arrayItem[1];
                    return theData;
                }
            });
            this.value = theData;
        });
    });

    // Some responsiveness
    var small = $('#container').width() < 400;

    // Instanciate the map
    $('#container').highcharts('Map', {
        chart: {
            events: {
                drilldown: function (e) {
                    this.setTitle(null, {
                        text: e.point.name
                    });
                    e.seriesOptions.name = e.point.name;
                },
                drillup: function (e) {
                    this.setTitle(null, {
                        text: 'Florida'
                    });
                }
            }
        },

        title: {
            text: 'Highcharts Map Drilldown'
        },

        subtitle: {
            text: 'Florida',
            floating: true,
            align: 'right',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },

        legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        colorAxis: {
            min: 0
            //max: yMaxVal,
            //minColor: '#E6E7E8',
            //maxColor: '#005645'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            }
        },

        series: [{
            data: Highcharts.maps['US-FL'],
            name: 'State of Florida',
            dataLabels: {
                //enabled: true,
                formatter: function () {
                    return this.point.id.substr(3, 2);
                },
                format: null
            }
        }],

        drilldown: {
            series: drilldownSeries,
            activeDataLabelStyle: {
                color: 'white'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    });
});

Answer 1

确实它看起来像一个可能的bug，在这里报道https://github.com/highslide-software/highcharts.com/issues/2750此时它是测试版，所以可能包含一些错误。

Highmaps地图比例

1 个答案: