javascript - 长刻度标签在 plotly.js 图表中被 chop

Question

是否可以在 plotly.js 中为刻度标签留出更多空间？ ？我图表中的长标签被 chop 了。

HTML:

<div id="plot"></div>

JavaScript:

var data = [{
  type: 'bar',
  x: [20, 14, 23],
  y: ['giraffes', 'orangutans', 'a looooooooong string'],
  orientation: 'h'
}];

var layout = {
  title: 'Bar Chart'
};

Plotly.newPlot('plot', data, layout);

我在 API for y-axes tick settings 中看不到如何执行此操作.

鉴于我的图表的性质，我需要使用水平方向。因此，我无法使用的解决方案是将刻度线旋转 90 度的垂直方向。

Answer 1

更新:通过 .axis.automargin 配置选项巧妙地添加了对自动边距的支持(参见 https://github.com/plotly/plotly.js/pull/2243)。

要使用，您需要更改:

var layout = {
  title: 'Bar Chart'
};

到:

var layout = {
  title: 'Bar Chart',
  yaxis: {
    automargin: true
  }
};

有关详细信息，请参阅 https://plot.ly/javascript/axes/

原始答案:您可以调整绘图图表的边距，为自己留出更多空间。例如，更改:

var layout = {
  title: 'Bar Chart'
};

到

var layout = {
  title: 'Bar Chart',
  margin: {
    l: 200
  }
};

您可以在此处阅读有关调整边距的更多信息:https://plot.ly/javascript/setting-graph-size/和整体布局选项:https://plot.ly/javascript/#layout-options