如何在plotly.js中为图例提供固定宽度

Question

我正在使用plotly.js 创建图表。有些图表的图例内有很长的文本，因此这些文本使图例不必要变大。我想给图例固定宽度，如果文本长度很长，我希望它被换行。

我一直试图通过操作 DOM 上的 svg 元素来做到这一点，但由于图例是svg:g标签，所以我真的不能做太多事情。我也尝试 Give textLengthto <text>，但它确实会换行文本，但不会换行。

有没有办法给图例固定宽度？

Answer 1

也许只是添加</br>到图例文本将是获得固定宽度的简单解决方案？您可以使用 Javascript 中的任何文本换行技巧来执行此操作，例如

for (i = 0; i < data.length; i += 1) {
  data[i].name = data[i].name.replace(/([\w\s,]{13,}?)\s?\b/g, "$1</br>");
}

for (i = 0; i < data.length; i += 1) {
  data[i].name = data[i].name.replace(/([\w\s,]{13,}?)\s?\b/g, "$1</br>");
}

var numbers = [];
var total = 10000;
var i = 0;
var data = [];

for (i = 0; i < total; i++) {
  numbers[i] =  ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3) / 3;
}

data.push({
  x: numbers,
  name: "that's a histogram with lots of points, it therefore needs lots of text as well",
  type: 'histogram',
  marker: {color: 'blue'}
});

numbers = [];
for (var i = 0; i < total; i++) {
  numbers[i] =  0.25 + ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3) / 3;
}
data.push({
  x: numbers,
  name: "that's yet another histogram with lots of points, it therefore needs lots of text as well, like for example that it was shifted by 0.25",
  type: 'histogram',
  marker: {color: 'red'}
});

for (i = 0; i < data.length; i += 1) {
  data[i].name = data[i].name.replace(/([\w\s,]{13,}?)\s?\b/g, "$1<br>");
}

Plotly.newPlot('myDiv', data, {showlegend: true});