So geben Sie der Legende eine feste Breite in plotly.js

Question

Ich benutze plotly.js, um Diagramme zu erstellen. Einige Diagramme haben lange Texte in der Legende, so dass diese Texte die Legende unnötig vergrößern. Ich möchte der Legende eine feste Breite geben und wenn eine Textlänge lang ist, möchte ich, dass sie umgebrochen wird.

Ich habe versucht, dies zu tun, indem Sie Svg-Element auf DOM manipulieren, aber seit der Legende ist svg:g Tag, kann ich nicht wirklich viel tun. Ich gebe auch textLength zu <text>, aber es wickelt Text, aber es macht keine neue Zeile.

Gibt es eine Möglichkeit, der Legende feste Breite zu geben?

Answer 1

Vielleicht wäre es einfach, der Legende eine einfache Lösung hinzuzufügen, um eine feste Breite zu erhalten? Sie könnten einen beliebigen Text-Wrapping-Trick in Javascript dazu verwenden, z.

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>