#position #scatter #plotly.js
#положение #разброс #plotly.js
Вопрос:
Я визуализирую « scattergl
график.
В моем приложении есть возможность переключаться между
- данные за определенный период времени,
- или для отображения текущих данных (обновление каждую секунду).
Для просмотра в реальном времени я использую extendTraces
для ввода новых точек каждую секунду.
В режиме реального времени я хотел бы изменить положение x моего графика, чтобы график «перемещался» по экрану, при этом новые точки всегда появлялись в одном и том же месте. Прямо сейчас это автоматическое масштабирование, я не хочу этого при потоковой передаче данных, но я не знаю, как установить фрейм, позицию или sth для достижения моей цели.
Теперь это с автоматическим масштабированием:
Это оптически то, что я хочу, чтобы все новые точки появлялись в одном и том же месте, а старые данные сдвигались влево:
Также при переключении с фиксированного временного интервала на просмотр в реальном времени я хотел бы затем «перейти» к обновлению данных, потому что в режиме реального времени меня не интересует «общая картина». Возможно, мне захочется уменьшить масштаб вручную или повернуть назад и т. Д., Но При переключении он должен «увеличивать» мой код до новых точек обновления.
Кажется, я использую неправильные условия поиска. Может быть, кто-нибудь знает правильный вариант конфигурации для передачи?
как я расширяю:
Plotly.extendTraces(nativeElement, {x, y}, numbers, maxPoints);
это часть моих данных:
{
"data": [
{
"type": "scatter",
"x": [
"2020-11-18T09:52:58.000Z",
"2020-11-18T09:52:59.000Z",
"2020-11-18T09:53:00.000Z",
"2020-11-18T09:53:01.000Z"
],
"y": [
4.637524903199999,
4.635876884400001,
4.6342288656,
4.635876884400001
],
"time": [],
"mode": "lines",
"marker": {
"size": 5
},
"domain": {
"x": [
0.25,
0.75
],
"y": [
0.25,
0.75
]
},
"showlegend": true,
"name": "Euro/timern<Beleuchtung 1>",
"stackgroup": "one",
"fill": "tonexty",
"line": {
"color": "rgba(230,230,77,1)",
"width": 1,
"dash": "solid"
},
},
],
"layout": {
"margin": {
"l": 50,
"r": 50,
"t": 5,
"b": 50
},
"autosize": true,
"showlegend": false,
"hovermode": "closest",
"legend": {
"x": 0,
"y": 1,
"traceorder": "normal",
"font": {
"family": "sans-serif",
"size": 10,
"color": "#000"
},
"bgcolor": "#E2E2E255",
"bordercolor": "#FFFFFF",
"borderwidth": 2,
"orientation": "h"
},
"title": null,
"xaxis": {
"tickfont": {
"color": "#333",
"size": 8
},
"title": null,
"titlefont": {
"color": "rgb(148, 103, 189)",
"size": 10
},
"nticks": 20,
"domain": [
0.01,
0.99
],
"tickformatstops": [
{
"dtickrange": [
null,
1000
],
"value": "%H:%M:%S.%L"
},
{
"dtickrange": [
1000,
60000
],
"value": "%H:%M:%S"
},
{
"dtickrange": [
60000,
86400000
],
"value": "%d.%m. %H:%M"
},
{
"dtickrange": [
86400000,
604800000
],
"value": "%d.%m.%y"
},
{
"dtickrange": [
604800000,
"M1"
],
"value": "%d.%m.%y"
},
{
"dtickrange": [
"M1",
"M12"
],
"value": "%b '%y"
},
{
"dtickrange": [
"M12",
null
],
"value": "%Y Y"
}
]
},
"yaxis": {
"tickfont": {
"color": "rgba(0,0,0,1)",
"size": 8
},
"title": "Geld [T€/year]",
"titlefont": {
"color": "rgba(0,0,0,1)",
"size": 10
},
"side": "left",
"domain": [
0.05,
0.95
],
"showgrid": true,
"ticks": "",
"showticklabels": true,
"position": 0
},
"hoverlabel": {
"font": {
"size": 10
},
"bgcolor": "#FFF",
"namelength": -1
}
}
}
Ответ №1:
Этого можно добиться, используя значение диапазона внутри свойства компоновки оси x.
layout = {
xaxis: {
autorange: false,
range: ['2016-07-01', '2016-12-31']
},
.....
};
https://plotly.com/javascript/time-series/#manually-set-range