plotly.js，如何调整标题区域大小

Posted 2023-02-18

【中文标题】plotly.js，如何调整标题区域大小

【英文标题】：plotly.js, how to adjust title area size

【发布时间】：2019-07-17 15:12:56

【问题描述】：

我有一个如下所示的散点图和代码。如何使标题区域不占用这么多空间？需要说明的是，我不是指标题的字体大小，而是标题区域占用的空白空间。

var rstTrace =  
    x:    x_data,
    y:    y_data,
    mode: 'markers',
    type: 'scatter',
    marker: 
        size: 3,
        color: chartMarkerColor
    
;
var rstLayout = 
        height: 400,
        title: 
            text: 'My Title',
            font: 
                family: 'Tahoma',
                size:   15
            
        ,
        xaxis: 
            showline:  true,
            zeroline:  false,
            linecolor: '#D3D3D3', // light gray
            tickcolor: '#D3D3D3'
        ,
        yaxis: 
            showline:  true,
            zeroline:  false,
            linecolor: '#D3D3D3',
            tickcolor: '#D3D3D3'
        ,
        backgroundcolor: '#D3D3D3'
;
Plotly.newPlot('resultDiv', [rstTrace], rstLayout);

【参考方案1】：

您可以更改图表的上边距

https://plot.ly/javascript/setting-graph-size/#adjusting-height-width-and-margins

例子

var rstLayout = 
  margin:
    t: 10
  
;

然而，上边距占图表上方的所有空间，因此如果您希望将标题向上或向下移动以使其不居中，您也可以使用以下解决方法：

document.querySelector('.gtitle').setAttribute('y', 100)

文本元素的位置由属性 x 和 y 控制。您可以将 y 更改为您认为适合将标题向下移动的任何值。请注意，您需要确保它在 svg 加载到页面后运行。

【讨论】：

这确实会移动标题文本的位置，但标题区域的大小不会改变。将文本向下移动到更靠近图表的位置后，会在文本上方留下更大的空白区域。

您是否尝试过调整图表边距？ plot.ly/javascript/setting-graph-size/…。那应该可以实现您想要的。

它在一定程度上起作用，但我不太明白这个margin是什么。我将margin:t: 10 放在布局中，它似乎改变了标题文本上方和文本下方的空间。这个边距是整个图表的边距还是只是图表内容的边距（不包括标题）？

是的，这里的上边距是指图表上方的整个空间，而不仅仅是图表和文本之间的空间。您可以尝试结合使用上面的代码和边距以获得您想要的外观。