Plotly 在轴坐标之间添加标签
我想在坐标轴之间添加一个标签 简单示例:假设我们有坐标点1和点2。这两个点将是直线,中间有一个标签或文本,像这样。 这是我想在Plotly.Js中尝试实现的。 以下是预期结果。 片段Plotly 在轴坐标之间添加标签,plotly,plotly.js,Plotly,Plotly.js,我想在坐标轴之间添加一个标签 简单示例:假设我们有坐标点1和点2。这两个点将是直线,中间有一个标签或文本,像这样。 这是我想在Plotly.Js中尝试实现的。 以下是预期结果。 片段 <head> <script src="plotly-latest.min.js"></script> </head> <body> <h1>Hello! Plotly.JS</h1> <
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<h1>Hello! Plotly.JS</h1>
<br>
<br>
<div id="axis" style="width:1000px;height:550px;"></div>
<script>
// Close
var trace1 = {
x: [0, -246.6205, 6.0366, 163.4306, 276.9357, 0],
y: [0, 149.8596, 509.4421, 551.4214, 460.8062, 0],
fill: 'tozeroy',
mode: 'lines+markers+text',
name: 'Lines, Markers and Text',
text: ["P1", "P2", "P3", "P4", "P5"],
textposition: 'top',
line: {
color: '#707070',
},
marker: {
color: '#707070',
size: 12
},
type: 'scatter'
};
var data = [trace1];
var layout = {
margin: {
t: 0
},
autoscale: false,
autosize: true,
hovermode: true,
xaxis: {
range: [-500.6205,500.9357],
visible: true,
showticklabels: true,
"categoryorder": "array",
},
yaxis: {
range: [0,951.4214,-700],
visible: true,
showticklabels: true,
type: 'linear',
"categoryorder": "array",
},
};
const config = {
displayModeBar: false,
scrollZoom: true,
staticPlot: false,
responsive: true
};
Plotly.newPlot('axis', data, layout,config);
</script>
</body>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="axes" style="width:1000px;height:550px;"></div>
<script>
//#region Top View
function setXrange(n1,n2,name){
var highestNumber = findTheHighestValue(n1,n2);
var range = getXrange(highestNumber);
n1 = n1 <= 0 ? n1 - range : n1 + range;
n2 = n2 + range;
return [n1,n2];
}
function findTheHighestValue(n1,n2){
if(n1 < 0)
n1 = Math.abs(n1);
if(n2 < 0)
n2 = Math.abs(n2);
var highestNumber = n1 <= n2 ? n2 : n1;
return highestNumber;
}
function getXrange(x){
if(x <= 200){
return 30;
}
else if(x > 200 && x <= 500){
return 250;
}
else if(x > 500 && x <= 1500){
return 300;
}
else{
return 350;
}
}
function setYRange(n1,n2,name){
var sum = getSum(n1,n2);
return getYRange(sum,n1,n2)
}
function getSum(n1,n2){
if(n1 < 0)
n1 = Math.abs(n1);
if(n2 < 0)
n2 = Math.abs(n2);
return n1 + n2;
}
function getYRange(x,n1,n2){
if(x <= 150){
return [0,n1 + 30, n2 <= 0 ? n2 - 30 : n2 + 30]
}
else if(x > 150 && x <= 1500){
return [0, n1 + 400, n2 <= 0 ? n2 - 700 : n2 + 700];
}
else{
return [0,n1 + 450, n2 <= 0 ? n2 - 750 : n2 + 750];
}
}
//#endregion
function findTheMidPointOfCoordinates(xA,yA,xB,yB){
let xMidCoordinate = 0;
if(xA < 0 && xB > 0){
xMidCoordinate = (xA) + xB;
}
else if(xA > 0 && xB < 0){
xMidCoordinate = xA + (xB);
}
else{
xMidCoordinate = xA + xB;
}
xMidCoordinate = xMidCoordinate / 2;
let yMidCoordinate = 0;
if(yA < 0 && yB > 0){
yMidCoordinate = (yA) + yB;
}
else if(yA > 0 && yB < 0){
yMidCoordinate = yA + (yB);
}
else{
yMidCoordinate = yA + yB;
}
yMidCoordinate = yMidCoordinate / 2;
return {
x: xMidCoordinate,
y: yMidCoordinate
};
}
function findTheSlopeOfCoordinates(xA,yA,xB,yB){
let scope = (yB - yA) / (xB - xA);
return scope;
}
function findTheDistanceOfCoordinates(xA,yA,xB,yB){
let distance = Math.pow((xA - xB), 2) + Math.pow((yA - yB), 2);
distance = Math.sqrt(distance);
return distance;
}
function findTheQuadrantOfCoordinates(x,y)
{
let xSign = Math.sign(x);
let ySign = Math.sign(y);
if(xSign >= 0 && ySign >= 0){
return 1; // Quadrant I
}else if(xSign <= -0 && ySign >= 0){
return 2; // Quadrant II
}else if(xSign <= -0 && ySign <= -0){
return 3; // Quadrant III
}else if(xSign >= 0 && ySign <= -0){
return 4; // Quadrant IV
}else{
return NaN;
}
}
function generatePlotlyAnnotation(midPoint,quadrant,slope,distance){
return {
x: midPoint.x,
y: midPoint.y,
text: 'Front',
textangle: '0',
showarrow: false,
font: {
family: 'Courier New, monospace',
size: 15,
color: "#000000"
},
xshift: 0,
yshift: 0,
}
}
function setPlotlyAnnotations(xCoordinates, yCoordinates){
let annotations = [];
let annotationDetails = []; // For debugging
for(let i = 0; i < xCoordinates.length - 1; i++){
let xA = xCoordinates[i];
let yA = yCoordinates[i];
let xB = xCoordinates[i+1];
let yB = yCoordinates[i+1];
let midPoint = findTheMidPointOfCoordinates(xA,yA,xB,yB);
let slope = findTheSlopeOfCoordinates(xA,yA,xB,yB);
let distance = findTheDistanceOfCoordinates(xA,yA,xB,yB);
let quadrant = findTheQuadrantOfCoordinates(midPoint.x, midPoint.y,slope);
let annotation = generatePlotlyAnnotation(midPoint,quadrant,slope,distance);
annotations.push(annotation);
annotationDetails.push({
midPoint: midPoint,
slope: slope,
distance: distance,
quadrant: quadrant,
annotation: {
xanchor: annotation.xanchor,
xshift: annotation.xshift,
yanchor: annotation.yanchor,
yshift: annotation.yshift,
xMidPoint: annotation.x,
yMidPoint: annotation.y
},
coordinates: {
xA: xA,
yA: yA,
xB: xB,
yB: yB,
},
pointLine: {
currentPoint: i+1,
nextPoint: i+2 == xCoordinates.length ? 1 : i+2
},
});
}
return annotations;
}
function setAxes(){
let xCoordinates = [0, -246.6205, 6.0366, 163.4306, 276.9357, 0];
let yCoordinates = [0, 149.8596, 509.4421, 551.4214, 460.8062, 0];
let labels = ["P1","P2", "P3", "P4", "P5"];
let annotations = setPlotlyAnnotations(xCoordinates,yCoordinates);
var trace1 = {
x: xCoordinates,
y: yCoordinates,
fill: 'tozeroy',
mode: 'lines+markers+text',
name: 'Lines, Markers and Text',
text: labels,
textposition: 'bottom center', // https://plotly.com/javascript/reference/scatter/#scatter-textposition
line: {
color: '#707070',
},
marker: {
color: '#707070',
size: 12
},
type: 'scatter'
};
var data = [trace1];
var layout = {
annotations: annotations,
margin: {
t: 0
},
autoscale: false,
autosize: true,
hovermode: true,
xaxis: {
range: setXrange(-246.6205,276.9357,"setPlotlyForAxis"),
visible: true,
showticklabels: true,
"categoryorder": "array",
},
yaxis: {
range: setYRange(0,551.4214,0,"setPlotlyForAxis"),
visible: true,
showticklabels: true,
type: 'linear',
"categoryorder": "array",
},
};
const config = {
displayModeBar: false,
scrollZoom: true,
staticPlot: false,
responsive: true
};
Plotly.newPlot('axes', data, layout,config);
}
setAxes()
</script>
</body>
你好Plotly.JS
//接近
变量trace1={
x:[0,-246.6205,6.0366,163.4306,276.9357,0],
y:[0149.8596509.4421551.4214460.8062,0],
填充:“tozeroy”,
模式:“行+标记+文本”,
名称:“线条、标记和文字”,
正文:[“P1”、“P2”、“P3”、“P4”、“P5”],
textposition:'顶部',
行:{
颜色:“#707070”,
},
标记:{
颜色:“#707070”,
尺码:12
},
键入:“散布”
};
var数据=[trace1];
变量布局={
保证金:{
t:0
},
自动缩放:错误,
自动调整大小:正确,
悬停模式:正确,
xaxis:{
范围:[-500.6205500.9357],
可见:对,
这是真的,
“categoryorder”:“数组”,
},
亚克斯:{
范围:[0951.4214,-700],
可见:对,
这是真的,
类型:'线性',
“categoryorder”:“数组”,
},
};
常量配置={
displayModeBar:false,
滚动缩放:对,
静态绘图:错误,
回答:对
};
Plotly.newPlot('axis',数据,布局,配置);
我试图对此进行研究,但不知道该怎么说。你有什么建议吗?为了完成这一点。我计算了两个坐标的中点,然后使用Plotly注释将标签放置在其上 片段
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<h1>Hello! Plotly.JS</h1>
<br>
<br>
<div id="axis" style="width:1000px;height:550px;"></div>
<script>
// Close
var trace1 = {
x: [0, -246.6205, 6.0366, 163.4306, 276.9357, 0],
y: [0, 149.8596, 509.4421, 551.4214, 460.8062, 0],
fill: 'tozeroy',
mode: 'lines+markers+text',
name: 'Lines, Markers and Text',
text: ["P1", "P2", "P3", "P4", "P5"],
textposition: 'top',
line: {
color: '#707070',
},
marker: {
color: '#707070',
size: 12
},
type: 'scatter'
};
var data = [trace1];
var layout = {
margin: {
t: 0
},
autoscale: false,
autosize: true,
hovermode: true,
xaxis: {
range: [-500.6205,500.9357],
visible: true,
showticklabels: true,
"categoryorder": "array",
},
yaxis: {
range: [0,951.4214,-700],
visible: true,
showticklabels: true,
type: 'linear',
"categoryorder": "array",
},
};
const config = {
displayModeBar: false,
scrollZoom: true,
staticPlot: false,
responsive: true
};
Plotly.newPlot('axis', data, layout,config);
</script>
</body>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="axes" style="width:1000px;height:550px;"></div>
<script>
//#region Top View
function setXrange(n1,n2,name){
var highestNumber = findTheHighestValue(n1,n2);
var range = getXrange(highestNumber);
n1 = n1 <= 0 ? n1 - range : n1 + range;
n2 = n2 + range;
return [n1,n2];
}
function findTheHighestValue(n1,n2){
if(n1 < 0)
n1 = Math.abs(n1);
if(n2 < 0)
n2 = Math.abs(n2);
var highestNumber = n1 <= n2 ? n2 : n1;
return highestNumber;
}
function getXrange(x){
if(x <= 200){
return 30;
}
else if(x > 200 && x <= 500){
return 250;
}
else if(x > 500 && x <= 1500){
return 300;
}
else{
return 350;
}
}
function setYRange(n1,n2,name){
var sum = getSum(n1,n2);
return getYRange(sum,n1,n2)
}
function getSum(n1,n2){
if(n1 < 0)
n1 = Math.abs(n1);
if(n2 < 0)
n2 = Math.abs(n2);
return n1 + n2;
}
function getYRange(x,n1,n2){
if(x <= 150){
return [0,n1 + 30, n2 <= 0 ? n2 - 30 : n2 + 30]
}
else if(x > 150 && x <= 1500){
return [0, n1 + 400, n2 <= 0 ? n2 - 700 : n2 + 700];
}
else{
return [0,n1 + 450, n2 <= 0 ? n2 - 750 : n2 + 750];
}
}
//#endregion
function findTheMidPointOfCoordinates(xA,yA,xB,yB){
let xMidCoordinate = 0;
if(xA < 0 && xB > 0){
xMidCoordinate = (xA) + xB;
}
else if(xA > 0 && xB < 0){
xMidCoordinate = xA + (xB);
}
else{
xMidCoordinate = xA + xB;
}
xMidCoordinate = xMidCoordinate / 2;
let yMidCoordinate = 0;
if(yA < 0 && yB > 0){
yMidCoordinate = (yA) + yB;
}
else if(yA > 0 && yB < 0){
yMidCoordinate = yA + (yB);
}
else{
yMidCoordinate = yA + yB;
}
yMidCoordinate = yMidCoordinate / 2;
return {
x: xMidCoordinate,
y: yMidCoordinate
};
}
function findTheSlopeOfCoordinates(xA,yA,xB,yB){
let scope = (yB - yA) / (xB - xA);
return scope;
}
function findTheDistanceOfCoordinates(xA,yA,xB,yB){
let distance = Math.pow((xA - xB), 2) + Math.pow((yA - yB), 2);
distance = Math.sqrt(distance);
return distance;
}
function findTheQuadrantOfCoordinates(x,y)
{
let xSign = Math.sign(x);
let ySign = Math.sign(y);
if(xSign >= 0 && ySign >= 0){
return 1; // Quadrant I
}else if(xSign <= -0 && ySign >= 0){
return 2; // Quadrant II
}else if(xSign <= -0 && ySign <= -0){
return 3; // Quadrant III
}else if(xSign >= 0 && ySign <= -0){
return 4; // Quadrant IV
}else{
return NaN;
}
}
function generatePlotlyAnnotation(midPoint,quadrant,slope,distance){
return {
x: midPoint.x,
y: midPoint.y,
text: 'Front',
textangle: '0',
showarrow: false,
font: {
family: 'Courier New, monospace',
size: 15,
color: "#000000"
},
xshift: 0,
yshift: 0,
}
}
function setPlotlyAnnotations(xCoordinates, yCoordinates){
let annotations = [];
let annotationDetails = []; // For debugging
for(let i = 0; i < xCoordinates.length - 1; i++){
let xA = xCoordinates[i];
let yA = yCoordinates[i];
let xB = xCoordinates[i+1];
let yB = yCoordinates[i+1];
let midPoint = findTheMidPointOfCoordinates(xA,yA,xB,yB);
let slope = findTheSlopeOfCoordinates(xA,yA,xB,yB);
let distance = findTheDistanceOfCoordinates(xA,yA,xB,yB);
let quadrant = findTheQuadrantOfCoordinates(midPoint.x, midPoint.y,slope);
let annotation = generatePlotlyAnnotation(midPoint,quadrant,slope,distance);
annotations.push(annotation);
annotationDetails.push({
midPoint: midPoint,
slope: slope,
distance: distance,
quadrant: quadrant,
annotation: {
xanchor: annotation.xanchor,
xshift: annotation.xshift,
yanchor: annotation.yanchor,
yshift: annotation.yshift,
xMidPoint: annotation.x,
yMidPoint: annotation.y
},
coordinates: {
xA: xA,
yA: yA,
xB: xB,
yB: yB,
},
pointLine: {
currentPoint: i+1,
nextPoint: i+2 == xCoordinates.length ? 1 : i+2
},
});
}
return annotations;
}
function setAxes(){
let xCoordinates = [0, -246.6205, 6.0366, 163.4306, 276.9357, 0];
let yCoordinates = [0, 149.8596, 509.4421, 551.4214, 460.8062, 0];
let labels = ["P1","P2", "P3", "P4", "P5"];
let annotations = setPlotlyAnnotations(xCoordinates,yCoordinates);
var trace1 = {
x: xCoordinates,
y: yCoordinates,
fill: 'tozeroy',
mode: 'lines+markers+text',
name: 'Lines, Markers and Text',
text: labels,
textposition: 'bottom center', // https://plotly.com/javascript/reference/scatter/#scatter-textposition
line: {
color: '#707070',
},
marker: {
color: '#707070',
size: 12
},
type: 'scatter'
};
var data = [trace1];
var layout = {
annotations: annotations,
margin: {
t: 0
},
autoscale: false,
autosize: true,
hovermode: true,
xaxis: {
range: setXrange(-246.6205,276.9357,"setPlotlyForAxis"),
visible: true,
showticklabels: true,
"categoryorder": "array",
},
yaxis: {
range: setYRange(0,551.4214,0,"setPlotlyForAxis"),
visible: true,
showticklabels: true,
type: 'linear',
"categoryorder": "array",
},
};
const config = {
displayModeBar: false,
scrollZoom: true,
staticPlot: false,
responsive: true
};
Plotly.newPlot('axes', data, layout,config);
}
setAxes()
</script>
</body>
//#区域俯视图
函数setXrange(n1、n2、名称){
var highestNumber=找到的最高值(n1,n2);
var范围=getXrange(最高数值);
n1=n1