Plot 如何在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']
        }]

    });
});

$（函数（）{
$（“#映射容器”）.highcharts({
图表：{
键入：“散布”，
zoomType:'xy'，
身高：225，
宽度：225
},
标题：{
文本：空
},
副标题:{
文本：空
},
亚克斯：{
网格线宽：0，
minorGridLineWidth:0，
lineColor:'透明'，
minorTickLength:0，
长度：0，
最小：，
马克斯：，
标签：{
已启用：false
},
标题：{
文本：空
}
},
xAxis：{
网格线宽：0，
minorGridLineWidth:0，
lineColor:'透明'，
minorTickLength:0，
长度：0，
最小：，
马克斯：，
标签：{
已启用：false
},
标题：{
文本：空
}
},
工具提示：{
启用：false，
},
打印选项：{
系列：{
标记：{
启用：对，
符号：'圆'，
半径：2
}
}
},
系列：[{
showInLegend:false，
键入：“散布”，
颜色：“rgba（223,83,83,5）”，
数据：地图数据，
键：['time'，'x'，'y']
}]
});
});

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

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

---

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

在图表中，使用默认值，最大值是底部间距，值为

15

，而其他值分别为

10

。将所有间距设置为

15

时，将得到一个正方形（

196 x 196 px

）

---

示例：

您可以使用新函数扩展Highcharts。在这里，您可以找到有关扩展Highcharts的信息：

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

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

函数也将你的绘图区域定位在图表容器的中间。

例如：

---

您可能需要使用

marginLeft

、

marginRight

、

marginTop

和

marginBottom

属性

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

---

参见Hightscharts文档中的示例：

您可以在图表配置中设置边距：0，但它会占用标签、标题、信用等的空间，因为它不是225X225。除打印区域外，还有这些区域的占位符info@NishithKantChaturvedi我就是这么想的。问题是，我想使绘图区域具有特定的大小，无论标签、信用、图例等是什么。我试图实现它，但发现您的代码中存在错误，在渲染高度、宽度和y时存在问题（请参阅您的小提琴中的控制台日志）。知道为什么会这样吗。嗨，我在这上面贴了类似的文章。有什么建议吗@格拉奇林斯基