gpt4 book ai didi

javascript - 显示绘图图表的完整轴范围?

转载 作者:行者123 更新时间:2023-11-30 11:05:17 24 4
gpt4 key购买 nike

如何在图表 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。

with autorange on

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

with autorange off

这是一个工作演示:https://codepen.io/Xeoncross/pen/MRREXq

最佳答案

您的数据都在那里,并且由于默认缩放级别而显示它只是“隐藏”。如果您希望默认情况下立即显示所有数据点,您可以在 x 和 y 轴上设置一个范围。

此外,设置范围不会影响您以后使用的缩放。

基本上,您可以将范围最小值和最大值设置为 0 和最大值。

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



在下面的代码片段中,我创建了两个变量来跟踪 x 和 y 最大值并加 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>


关于javascript - 显示绘图图表的完整轴范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55908032/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com