Допустим, у меня есть график с тремя трассировками данных, который отображается на одном графике с общими xaxis и yaxis вместе с rangeslider.Теперь я хочу переключить этот график на график вспомогательных участков, используя сетку с 3 строками, которые имеют одинаковый xaxis и используют разные yaxis вместе с rangeslider.Пожалуйста, отметьте этот codepen , где у меня есть эти два графика.
Я хочу переключиться между двумя режимами [plot1 и plot2] независимого yaxis и общего yaxis соответственно.
В этом примере я заново строю оба графика.Но вместо этого есть подход, в котором мы можем использовать Plotly.relayout() для достижения этого переключения.
Кодовое перо для кодовой формы, как показано ниже.
HTML
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<div id="myDiv2">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
</body>
</html>
JAVASCRIPT
// Plot 1 with shared x axes
var trace1 = {
x: [0, 1, 2, 4,5],
y: [10, 110, 120,34,56],
yaxis: 'y1',
type: 'line'
};
var trace2 = {
x: [1,2,3],
y: [100, 110, 120,97,28],
yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [1,2,3,4],
y: [100, 1100, 200,45],
yaxis: 'y3',
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {
titiel:"Plot 1 with shared x axes with range slider",
height:600,
xaxis:{rangeslider:{
height: 200
}},
grid: {
rows: 3,
columns: 1,
pattern: 'dependent',
roworder: 'bottom to top'
}
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true}, {responsive: true});
//plot2 with shared x and yaxes
var trace1 = {
x: [0, 1, 2, 4,5],
y: [10, 110, 120,34,56],
// yaxis: 'y1',
type: 'line'
};
var trace2 = {
x: [1,2,3],
y: [100, 110, 120,97,28],
// yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [1,2,3,4],
y: [100, 1100, 200,45],
yaxis: '',
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {
title:"plot2 with shared x and yaxes with rangeSlider",
height:600,
xaxis:{rangeslider:{}},
grid: {
rows: 3,
columns: 1,
pattern: 'dependent',
roworder: 'bottom to top'
}
};
Plotly.newPlot('myDiv2', data, layout, {showSendToCloud: true}, {responsive: true});
Ожидаемое: Эффективное переключение между двумя режимами, как показано на рисунке, без использования нового графика.
