Plotly.js添加标记将填充添加到x轴
Wes*_*ssi 18 javascript d3.js plotly
有没有办法防止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中完成.
我可能没有像素相同(设置为102px),但你应该明白这一点.
<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>我遇到了同样的问题，我找到的解决方案是设置autorange为false AND指定 x-axis 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>| 归档时间： |
|
| 查看次数： |
735 次 |
| 最近记录： |