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

我希望能够减少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

最佳答案

据我所知，您不能直接执行操作，但至少有两种可能，请参阅here讨论。

直接移动轴标签

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

或在annotation中添加layout并指定其位置

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

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'
    }
  },
  annotations: [
    {
      x: 0.5,
      y: -0.15,
      xref: 'paper',
      yref: 'paper',
      text: 'I am not an axis label',
      showarrow: false,
    }
  ]
};
Plotly.newPlot('myDiv', data, layout);
document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 100%; height: 500px;"></div>