Highcharts 高比例尺地图

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

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

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

//设置向下搜索指针
$.each（Highcharts.maps['US-FL']，函数（）{
this.drilldown=this.id；
});
//添加一些真实数据
$.each（Highcharts.maps['US-FL']，函数（）{
//this.value=Math.round（Math.random（）*100）；
var theID=this.id.toString（）；
变量数据；
数据1.some（函数（arrayItem）{
var x=arrayItem[0]；
控制台日志（x）；
if（x==theID）{
数据=阵列项[1]；
返回数据；
}
});
this.value=数据；
});
$。每个（drilldownSeries，函数（）{
$.each（this.data，function（）{
var theID=this.id.toString（）；
变量数据；
数据1.some（函数（arrayItem）{
var x=arrayItem[0]；
//控制台日志（x）；
if（x==theID）{
数据=阵列项[1]；
返回数据；
}
});
this.value=数据；
});
});
//一些反应
var small=$（“#容器”）.width（）<400；
//实例化地图
$（“#容器”）.highcharts（'Map'{
图表：{
活动：{
向下展开：函数（e）{
此.setTitle（null{
文本：e.point.name
});
e、 serieoptions.name=e.point.name；
},
向上钻取：功能（e）{
此.setTitle（null{
文字：“佛罗里达”
});
}
}
},
标题：{
文本：“Highcharts地图向下展开”
},
副标题:{
文本：“佛罗里达”，
浮动：是的，
对齐：“右”，
y:50，
风格：{
字体大小：“16px”
}
},
图例：小？{}：{
布局：“垂直”，
对齐：“右”，
垂直排列：“中间”
},
颜色轴：{
最低：0
//马克斯：yMaxVal，
//minColor:“#E6E7E8”，
//maxColor:“#005645”
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
},
打印选项：{
地图：{
国家：{
悬停：{
颜色：“#EEDD66”
}
}
}
},
系列：[{
数据：Highcharts.maps['US-FL']，
名称：“佛罗里达州”，
数据标签：{
//启用：对，
格式化程序：函数（）{
返回此.point.id.substr（3,2）；
},
格式：空
}
}],
向下展开：{
系列：钻井系列，
activeDataLabelStyle：{
颜色：“白色”
},
钻孔按钮：{
relativeTo:'spacingBox'，
职位：{
x:0,，
y:60
}
}
}
});
});

事实上，它看起来像是一个可能的bug，这里报告的是测试版，所以可能包含一些bug。

理解。仍然是一个非常好的测试版。我已经完成了一些类型合并（请参阅）。点击佛罗里达-然后是希尔斯堡或皮内拉斯县-出现历史图表。

    // 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
                }
            }
        }
    });
});