如何使用JavaScript在Plotly中旋转数据点的文本标签

首先明确：该功能无需强制使用annotations实现，可以直接在trace的数据配置层面完成，你的代码不生效是因为属性名使用错误。

修正方案 #

你错误地使用了angle属性，Plotly.js中scatter类trace的内置文本标签旋转需要使用textangle属性，直接配置在trace层级即可生效，修改后的代码如下：

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: 'lines+markers+text',
  name: 'Lines, Markers and Text',
  text: ['Text A', 'Text B', 'Text C'],
  textposition: 'top',
  textangle: 90, // 替换原来的angle属性即可生效
  type: 'scatter'
};
var data = [trace1];
var layout = {showlegend: false};
Plotly.newPlot('myDiv', data, layout);

上述修改后，所有数据点的文本标签都会统一旋转90度垂直显示。

特殊场景说明 #

如果你需要为不同数据点设置不同的旋转角度，才需要用到annotations配置，实现逻辑如下：

• 遍历你的x、y、text数组，为每个数据点生成对应的annotation对象
• 每个annotation中单独配置textangle属性，同时设置showarrow: false隐藏箭头，调整位置参数匹配你要的显示效果

内容的提问来源于stack exchange，提问作者MWB