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

Question

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

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

$(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']
        }]

    });
});

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

我对结果进行了截图。红线是 map ，黑色正方形是图表容器(这是一个完美的正方形)，蓝色矩形是绘图区域，您可以看到它不是正方形。

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

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/