如何使用javascript在plotly中旋转数据点的文本标签答案

【问题标题】：How to rotate text labels for data points in plotly using javascript如何使用javascript在plotly中旋转数据点的文本标签
【发布时间】：2021-11-03 17:35:38
【问题描述】：

我想要一行带有文本标签的数据点。我似乎无法正常工作。

这是我尝试过的一个示例。然而，结果是文本是水平的而不是垂直的......

这只能通过注释实现吗？还是有更直接的方法（在数据本身中）？

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',
  angle: 90, // NOT WORKING
  type: 'scatter'
};
var data = [trace1];
var layout = {showlegend: false};
Plotly.newPlot('myDiv', data, layout);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

【问题讨论】：

标签： javascript plotly

【解决方案1】：

很遗憾，您无法在跟踪中指定 textangle 以进行分散。如您所说，textangle 只能使用annotations 进行修改。

这里有一个小例子说明你可以做什么，循环坐标使注释更容易构造（codepen 是here）：

var trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1];
var coordinates = [[0, 1, 2],[1, 1, 1]]
var text = ['Text A', 'Text B', 'Text C']
var annotations = []

for (let i = 0; i<coordinates[0].length; i++) {
  annotations.push({
    x: coordinates[0][i],
    y: coordinates[1][i],
    text: text[i],
    textangle: 90,
    showarrow: false
  })
}

var layout = {showlegend: false, annotations: annotations};
Plotly.newPlot('myDiv', data, layout);

【讨论】：

与此同时，我确实使用注释解决了它。谢谢@Derek O！