在轴坐标之间添加标签
Add label between Axes coordinates
我想在坐标轴之间添加一个标签。
简单示例:假设我们有坐标点 1 和点 2。这两个点将是一条线,并且在它的中间有一个标签或文本,如下所示。
这是我想在Plotly.Js中实现的。
下面是预期的结果。
片段
<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>
我试图对此进行研究,但不知道如何表达。你有什么建议吗?
为了完成这个。我计算了两个坐标的中点,然后使用 Plotly 注释将标签放在上面。
代码段
<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>
结果:
我想在坐标轴之间添加一个标签。
简单示例:假设我们有坐标点 1 和点 2。这两个点将是一条线,并且在它的中间有一个标签或文本,如下所示。
这是我想在Plotly.Js中实现的。
下面是预期的结果。
片段
<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>
我试图对此进行研究,但不知道如何表达。你有什么建议吗?
为了完成这个。我计算了两个坐标的中点,然后使用 Plotly 注释将标签放在上面。
代码段
<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>
结果: