Блог

Я визуализирую « 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
    }
  }
}
  

Этого можно добиться, используя значение диапазона внутри свойства компоновки оси x.

 layout = {
    xaxis: {
        autorange: false,
        range: ['2016-07-01', '2016-12-31']
   },
   .....
};
  

https://plotly.com/javascript/time-series/#manually-set-range