javascript - 如何在plotly.js中为图例赋予固定宽度

Question

我正在使用plotly.js创建图表。有些图表的图例中包含长文字，因此这些文字会使图例不必要地变大。我想给图例固定宽度，如果文本的长度很长，我希望将其换行。

我一直在尝试通过操作DOM上的svg元素来执行此操作，但是由于Legend是svg:g标记，因此我实际上不能做很多事情。我也尝试将textLength赋予<text>，但是它确实可以换行，但是不会换行。

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

Answer 1

也许只添加图例文本是获得固定宽度的简单解决方案？
您可以使用Javascript中的任何文本环绕技巧来做到这一点，例如

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

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>