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);

我不知道如何在y轴刻度设置API中实现此操作。

考虑到我的图表性质，我需要使用水平方向的刻度。所以，我不能使用垂直方向并将刻度旋转90度的解决方案。

- Ollie Glass

---

自动边距是计划中的新增功能。请关注此问题 https://github.com/plotly/plotly.js/issues/296 - eagor

Answer 1

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

使用时，您需要更改：

使用方法：更改以下内容：

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

致：

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

更多信息，请参见https://plot.ly/javascript/axes/

Original Answer: 你可以调整 Plotly 图表的边距来获得更多空间。例如，更改：

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

- Steve

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
  }
};

- eagor

---

使用纯JS：var maxLabelLength = Math.max.apply(null, y.map(label => label.length)); - Dmitry Kurmanov