轴顶视图布局

Question

我正在使用 Plotly.JS 创建地块。实现类似于此Tract Plotter

这就是我想要实现的剧情布局

这是我创建的。

片段


<head>
    <script src="plotly-latest.min.js"></script>
</head>
<body>
    <h1>Hello! Plotly.JS</h1>
<br>
<br>
<h1>PlotlyJS using Axes</h1>
<div id="axis" style="width:1000px;height:550px;"></div>
<script>
  // Close
  var trace1 = {
  x: [0, 21.3716, 9.1988, 3.2616, -15.5257,0],
  y: [0, -18.1483, -30.0701, -30.3968, -15.5887,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 = {
  autosize: true,
  hovermode: false,
  xaxis: {
    visible: true, // hide x axis chart line
    showticklabels: true,  // hide x axis label
  },
  yaxis: {
    visible: true, // hide y axis chart line
    showticklabels: true // hide y axis label
  }
};

const config = {
  displayModeBar: false, // this is the line that hides the bar.
  staticPlot: true,
  responsive: true
};

Plotly.newPlot('axis', data, layout,config);
  </script>
</body>

plotly.js 中是否有在概览布局中查看轴的配置？

Answer 1

这是我使用蛮力解决方案创建的解决方案。我通过获取 x 和 y 坐标的最低和最高来增加轴范围。使用这个绘图将压缩。

片段

<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 setAxes(){
let xCoordinates =  [0, 21.3088, 9.198, 3.2605, -15.5898, 0];
let yCoordinates = [0, -18.1459, -30.0058, -30.3949, -15.5255, 0];
let labels = ["P1", "P2", "P3", "P4", "P5"];
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 = {
margin: {
      t: 0
  },
autoscale: false,
autosize: true,
hovermode: true,
xaxis: {
    range: setXrange(-15.5898,21.3088,"setPlotlyForAxis"), 
  visible: true, 
  showticklabels: true, 
  "categoryorder": "array",
},
yaxis: {
    range:  setYRange(0,-30.3949,"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>

结果：

轴顶视图布局

Axes top view layout

plotly

plotly.js