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

【问题标题】：How to set plot area width and height in Highcharts?如何在 Highcharts 中设置绘图区域的宽度和高度？
【发布时间】：2018-03-14 22:13:22
【问题描述】：

我正在绘制由 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']
        }]

    });
});

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

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

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

【问题讨论】：

您可以在图表配置中设置边距：0，但它会占用标签、标题、信用等空间，因为它不是 225X225。除了绘制区域之外，这些信息还有占位符
@NishithKantChaturvedi 这就是我的想法。问题是我想制作特定大小的绘图区域，无论有什么标签、学分、图例等......

标签： plot highcharts

【解决方案1】：

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

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

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

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

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

【讨论】：

您好尝试实现它，但发现您的代码中存在错误，在渲染高度、宽度和 y 时存在问题（请参阅小提琴中的控制台日志）。知道为什么会这样吗？
stackoverflow.com/questions/45731089/… 。嗨，我在此发布了类似的问题。有什么建议吗？ @Grzegorz Blachlinski

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可能想要使用marginLeft、marginRight、marginTop 和marginBottom 属性。

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

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

【讨论】：