英文:
How do I add data labels to surface and ribbon plots in plotly.js
问题
我正在尝试使用plotly.js绘制测量数据。由于数据应该类似于三维物体，我正在寻找一个三维图，并发现ribbon plot相当适合。不幸的是，与plotly中的2D图不同，许多功能如注释似乎不起作用。是否有办法在每个ribbon或每个x值上标记最大值和最小值等？
我尝试了注释功能，并期望有一些数据标签和线显示指向指定的坐标，但什么都没有显示。
另外，我希望可能永久可用的名称或文本选项，而不仅仅在鼠标悬停时才可见，但似乎我也找不到解决办法。
英文:
I am trying to plot measurement data by using plotly.js. As data should resemble a 3 dimensional item, I was looking for a 3D plot and found the ribbon plot to be quite suitable. Untortunately, unlike in the 2D plots in plotly, a lot of functions like annotations seem to be not working. Is there any way to label e.g. maximum and minimum values in each ribbon or for each x value or so?
function showResults(){
let data = [[0,-1,-2,2],[0,-6,-4,2],[0,3,1,1],[0,-1],[0,5,7,4],[0,-3,-1,-2],[0,5,3],[0,4,1,2],[0,-5,5,1],[0,-1,1],[0,1,3,-3],[0,1,-1]];
let traces = [];
for (let i = 0; i < data.length; i++) {
let trace = {
x: [[0, 0], [1, 1], [2, 2], [3, 3]],
y: [[i, i+0.5], [i, i+0.5], [i, i+0.5], [i+0.5]],
z: [[data[i][0], data[i][0]], [data[i][1], data[i][1]], [data[i][2], data[i][2]], [data[i][3], data[i][3]]],
type: 'surface',
mode: 'lines+markers+text',
name: 'group' +i,
nameposition: 'bottom',
text: 'group'+i,
textposition: 'bottom',
showscale: false,
showticklabels: true
};
traces.push(trace);
}
var layout = {
title: 'wasduwillst',
autosize: false,
margin: {
l: 10,
r: 40,
b: 40,
t: 40,
},
annotations:
{
x: 2,
y: 5,
xref: 'x',
yref: 'y',
text: 'Annotation Text',
showarrow: true,
arrowhead: 7,
ax: 0,
ay: -40
},
scene: {
aspectmode: 'manual',
aspectratio: {
x: 1, y: 2.5, z: 0.5, //adjusts the aspect ratio so that the width of the wing is displayed wider than the depth
},
xaxis: {title: 'Leading to Trailing'},
yaxis: {title: 'Column'},
zaxis: {title: 'Offset'}
}
};
Plotly.newPlot('gd', {
'data': traces,
'layout': layout
}
);
}
I tried the annotation function and was expecting to have some kind of data labels and lines shown pointing to the specified coordinates, but nothing is showing.
Also I was hoping to maybe have the name or text option available permanently and not only on mouse over, but I didn't seem to find a solution for that either.
答案1
得分: 1
问题在于annotations需要一个对象数组，所以你只需要将定义放在方括号内：
// ...
annotations: [{
x: 2,
y: 5,
xref: 'x',
yref: 'y',
text: 'Annotation Text',
showarrow: true,
arrowhead: 7,
ax: 0,
ay: -40
}],
// ...
英文:
The issue is that annotations expects an array of objects, so you just need to enclose the definition into square brackets :
// ...
annotations: [{
x: 2,
y: 5,
xref: 'x',
yref: 'y',
text: 'Annotation Text',
showarrow: true,
arrowhead: 7,
ax: 0,
ay: -40
}],
// ...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论