plotly.js 减少 yAxis 标题和轴号之间的边距

Question

我希望能够减少 yAxis 标题和轴号之间的边距，我在 plotly.js 文档中找不到任何提及它的属性或函数

这里的代码示例

var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  name: 'Name of Trace 1',
  type: 'scatter'
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
  name: 'Name of Trace 2',
  type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
  title: 'Plot Title',
  xaxis: {
    title: 'x Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  yaxis: {
    title: 'y Axis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  }
};
Plotly.newPlot('myDiv', data, layout);

这里还有一个 codepen 链接codepen

Answer 1

如果有人正在寻找此解决方案，那么它现在可用，请使用 'standoff' 属性。

像这样的事情：

 var layout = {
      margin: {t:0,r:0,b:0,l:20},
      xaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Month",
          standoff: 20
        }},
      yaxis: {
        automargin: true,
        tickangle: 90,
        title: {
          text: "Temprature",
          standoff: 40
        }}}

Answer 2

据我所知你不能直接这样做，但你至少有两种可能性，请参阅此处的讨论。

直接移动轴标签

document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1

或添加一个annotationtolayout并指定其位置

annotations: [
  {
    x: 0.5,
    y: -0.15,
    xref: 'paper',
    yref: 'paper',
    text: 'I am not an axis label',
    showarrow: false,
  }
]

document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1

annotations: [
  {
    x: 0.5,
    y: -0.15,
    xref: 'paper',
    yref: 'paper',
    text: 'I am not an axis label',
    showarrow: false,
  }
]