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

Question

我有一个如下所示的散点图和代码。如何让标题区不占那么多space？澄清一下，我指的不是标题的字体大小，而是标题区域所占的空白space。

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);

Answer 1

您可以更改图表的上边距

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

示例

var rstLayout = {
  margin:{
    t: 10
  }
};

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

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

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

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

plotly.js, how to adjust title area size

plotly.js