Plotly.js 添加标记将填充添加到 x 轴
Posted
技术标签:
【中文标题】Plotly.js 添加标记将填充添加到 x 轴【英文标题】：Plotly.js Adding markers adds padding to x-axis 【发布时间】：2018-03-05 03:13:05 【问题描述】：在向折线图添加标记时，有没有办法防止 Plotly 更改 x 轴上的填充。
请参阅下面的两个 sn-ps。唯一的区别是第 24 行，其中 'lines' 更改为 'lines+markers'。
第一个没有标记的 sn-p：
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout =
xaxis:
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
,
;
var trace1 =
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines',
;
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>第二个带有标记的 sn-p：
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout =
xaxis:
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
,
;
var trace1 =
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
;
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>【问题讨论】：
你能说得更具体点吗？在 chrome (Windows/Mac/Linux) 上，x 轴上的填充是相同的。我什至将两者都保存为图像并覆盖它们——除了顶点处的点之外，两者是相同的。您认为哪个浏览器/操作系统有所不同？你能发布它的屏幕截图吗？ 我添加了一个显示差异的屏幕截图。我在 Chrome (Windows) 上。 知道了，我想我有一个不错的答案给你... 【参考方案1】：这有点令人困惑，因为它实际上是关闭了 y 轴。
无论如何，这可以通过将yaxis 设置为showgrid: false 然后偏移yaxislayer-above 以重新定位标签来解决。
这可以像我一样在 css 中完成，也可以在 javascript 中完成。
我可能在这里没有像素相同（设置为 102 像素），但你应该明白了。
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.yaxislayer-above
transform: translate(102px,100px);
</style>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout =
yaxis:
showgrid: false,
,
xaxis:
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
,
;
var trace1 =
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
;
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>【讨论】：
谢谢。绝对是一个很好的答案。但是，它实际上仍然在做同样的事情并改变 x 轴。现在我们只是移动 y 轴，所以它不那么明显。 imgur.com/a/pi49e 在这个玩具示例中，它并没有太大的区别 - 但在我的实际用例中，它更复杂是非常明显的。看到这个：imgur.com/a/fhFuQ 听起来不错。期待看到答案。谢谢！ 只是一个碰撞。很想看看你的建议。 @Wessi - 嗯仍然在玩它 - 我的想法有点做作......只要保持问题开放，当我有机会时我会玩它。奇怪的是 为什么 它们的缩放比例不同 - 没有真正的原因，要查看 plotlyjs 源并深入了解它......【参考方案2】：我遇到了同样的问题，我找到的解决方案是将autorange 设置为false AND 指定x 轴range。见：https://plot.ly/javascript/reference/#layout-xaxis-range
固定示例：
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script>
var layout =
xaxis:
showticklabels: true,
tickmode: 'auto',
nticks: 15,
tickangle: 45,
rangemode: 'tozero',
range: [0, 7]
,
;
var trace1 =
x: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'],
y: [10, 15, 13, 17, 10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
;
var data = [trace1];
Plotly.newPlot('myDiv', data, layout);
</script>
</body>【讨论】：
请注意，当提供range 时，autorange 会自动设置为False。以上是关于Plotly.js 添加标记将填充添加到 x 轴的主要内容，如果未能解决你的问题，请参考以下文章