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

Question

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

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/# adjustment-height-width-and-margins

例子

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

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

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

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