在plotly.js图表​​中被切断的长刻度标签

Question

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

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

更新：通过。轴 .automargin配置选项，添加了对automargins的支持（请参阅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

Answer 2

您还可以根据标签长度动态设置保证金：

var maxLabelLength = d3.max(data, d => d3.max(d.y, label => label.length));
const letterWidth = 7;
var layout = {
  title: 'Bar Chart',
  margin:{
    l: maxLabelLength * letterWidth
  }
};