Question

我想在坐标轴之间添加一个标签。

简单示例：假设我们有坐标点 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>

我试图研究这个，但不知道如何表达。你有什么建议吗？

Answer 1

为了实现这一点。我计算了两个坐标的中点，然后使用 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 个答案: