如何在 Highcharts 中设置绘图区域的宽度和高度？

Question

我正在绘制由 HighCharts 中的一系列点制作的地图。我希望该地图能够正确缩放并成为一个完美的正方形。

因此，我将图表高度和宽度设置为相同的值：

$(function () {
    $('#map-container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            height: 225,
            width: 225
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        yAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lat_bon_min; ?>,
            max: <?php echo $lat_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        xAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lon_bon_min; ?>,
            max: <?php echo $lon_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 2
                }
            }
        },

        series: [{
            showInLegend: false,  
            type: 'scatter',
            color: 'rgba(223, 83, 83, .5)',
            data: map_data,
            keys: ['time', 'x', 'y']
        }]

    });
});

问题是图表容器是正方形，但绘图区域不是。

我对结果做了一个截图。红线是地图，黑色方块是图表容器（是一个完美的正方形），蓝色矩形是你可以看到的不是正方形的绘图区域。

如何设置绘图区域大小以使其成为完美的正方形？

Answer 1

您可以使用新功能扩展 Highcharts。您可以在此处找到有关扩展 Highcharts 的信息：http ://www.highcharts.com/docs/extending-highcharts/extending-highcharts

正如您将在我的演示中看到的，我包装了 setChartSize 函数并让他们可以使用您的图表选项中的参数：

chart: {
  plotAreaWidth: 300,
  plotAreaHeight: 200
},

功能还将您的绘图区域定位在图表容器的中间。

示例：http : //jsfiddle.net/izothep/eph5secj/2/