在向折线图添加标记时，有没有办法防止 Plotly 更改 x 轴上的填充。
请看下面的两个片段。唯一的区别是第 24 行，其中 'lines'改为'lines+markers' .
第一个没有标记的片段:
<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>带有标记的第二个片段:
<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>
最佳答案
这有点令人困惑，因为它实际上是关闭了 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>关于javascript - Plotly.js 添加标记将填充添加到 x 轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46383368/