Question

如何在图表x，y上显示从0,0（或最低负点）到8,8（或最高数据点）的同时显示完整图表？

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];
var layout = {
  // autosize: true,
  // rangemode: "tozero",
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { autorange: false },
  yaxis: { autorange: false },
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

如果启用自动量程，它将显示数据，但不显示0,0。

如果禁用自动调整范围，则会显示0,0，但不会显示数据。

这是一个有效的演示：https://codepen.io/Xeoncross/pen/MRREXq

Answer 1

您的数据就在那里，由于默认的缩放级别，显示的数据只是“隐藏”。如果希望默认情况下一次显示所有数据点，则可以在x和y轴上设置一个范围。

此外，设置范围不会影响您将来的缩放。

基本上，您可以将范围min和max设置为0和最大值。

xaxis: { autorange: false, range:[0, 10]},
yaxis: { autorange: false, range:[0, 10]},

在以下代码段中，我制作了两个变量来跟踪x和y max并加2。这将确保顶部显示2的缓冲区以显示所有数据点。

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];

var xMax = data[0].x[data[0].x.length - 1] + 2;
var yMax = data[0].y[data[0].y.length - 1] + 2;
var layout = {
  // autosize: true,
  // rangemode: "tozero",
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { autorange: false, range:[0, xMax]},
  yaxis: { autorange: false, range:[0, yMax]},
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- jquery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>

Answer 2

您只需将rangemode设置为'tozero'并为每个轴启用autorange：

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];
var layout = {
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { rangemode:'tozero', autorange:true},
  yaxis: { rangemode:'tozero', autorange:true}
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- jquery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>

请参见official Plotly examples。

显示绘图图的整个轴范围？

2 个答案: