如何在Plot.ly JS标题中创建新行

Question

我正在使用Plot.ly JS绘制图表。这些图表显示了在某项调查中对特定问题给出的答案。因此，图表的标题就是问题本身，有时可能会很长。目前，标题超出了图表范围并被隐藏，如下图所示（还不能在Stack Overflow上嵌入图像，因此创建了一个指向图像的链接）:

这是被调用的代码，其中values和labels是在其他地方定义的变量：

var graph_data = [
    {
        values: values,
        labels: labels,
        type: 'pie'
    }
];
var layout = {
 title: 'How responsive has our support team been to your questions or concerns?'
};
Plotly.newPlot( chartID, graph_data, layout );

我尝试向字符串中添加换行字符，如\r和\n和\r\n，但无法正常工作。我还尝试更改word-wrap的CSS属性，但也不起作用。有什么建议可以在Plot.ly JS中轻松显示多行标题吗？

- Frank Corso

Answer 1

使用<br>在Plotly字符串中换行。

- etpinard

---

啊，我一直在尝试使用 \n 和 \r 以及其他各种方法，却从未尝试过基本的 HTML。那个有效。谢谢！ - Frank Corso

@M.A. 你知道这个在3D图中是否也能工作吗？（通常需要在场景环境中使用轴）- 在我的情况下它不起作用 - 谢谢！（我实际上正在使用Python编程） - jjrr

提醒一下，<br />不起作用，必须改为<br>。 - Nicholas Porter

Answer 2

为了更好地控制多行标题，我会像这样操作：

multipleStringLines: (title) => {
    if (title.length > 20) { // check if greater than threshold!
                let y_axis = title.split(' ');    //break into words
                let interval = title.split(' ').length / 2;     //2-lines
                return y_axis.slice(0, interval).join(' ') + '<br>' + y_axis.slice(interval, y_axis.length).join(' ');
    }
     return title;
}

- Adnan Boota

---

这个回答解决了你的问题吗？ - danday74

主要答案是 <br>，但这只是我处理多行标题的个人方法。 - Adnan Boota