javascript - chart - plotly title
Plotly.js Agregar marcadores agrega relleno al eje x (2)
Esto es un poco confuso ya que en realidad es el eje y que está desactivado. De todos modos, esto se puede resolver configurando yaxis en showgrid: false luego compensando el yaxislayer-above para reubicar las etiquetas.
Esto podría hacerse en css, como lo he hecho, o en Javascript.
Puede que no tenga un píxel idéntico aquí (establecido en 102px) pero debería tener la idea.
<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>
¿Hay alguna manera de evitar que Plotly cambie el relleno en el eje x al agregar marcadores a un gráfico de líneas? Por favor, vea los dos fragmentos a continuación. La única diferencia es la línea 24, donde las ''lines'' se cambian a ''lines+markers'' .
Primer fragmento sin marcadores:
<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>
Segundo fragmento con marcadores:
<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>
Tuve el mismo problema, y la solución que encontré fue establecer el range autorange en false Y especificar el range eje x. Consulte: https://plot.ly/javascript/reference/#layout-xaxis-range
Ejemplo fijo:
<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>