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

示例

spring.thymeleaf.cache=false

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

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

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