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/

Answer 2

在您的图表中，使用默认值spacing，最大值为底部间距，值为15，而其他值均为10。将所有间距设置为15时，您将得到一个正方形（196 x 196 px）。

示例：http://jsfiddle.net/5825mzLs/

Answer 3

您可能希望使用marginLeft，marginRight，marginTop和marginBottom属性。

边距选项（marginLeft，marginTop等）为实际绘图区域提供边距，不适用于图表上的其他元素（标签，图例等）

请参阅Hightscharts文档中的示例：https://www.highcharts.com/docs/chart-design-and-style/design-and-style

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

3 个答案: