Plotly.js 以编程方式通过偏移在 x 轴上移动图答案

【问题标题】：Plotly.js shift graph on x-axis by offset programmaticallyPlotly.js 以编程方式通过偏移在 x 轴上移动图
【发布时间】：2020-11-18 10:11:43
【问题描述】：

我正在渲染一个“scattergl”图表。

在我的应用中可以切换

特定时间范围内的数据，
或显示实时数据（每秒更新）。

对于实时取景，我使用extendTraces 每秒推送新点。

在实时视图中，我想更改图形的 x 位置，因此图形在屏幕上“移动”，新点总是出现在同一个位置。现在它是自动缩放，当数据正在流式传输时我不希望这样，但我不知道如何设置框架或位置或某事来实现我的目标。

现在是自动缩放：

这就是我想要的，+ 让所有新点出现在同一个位置，将旧数据向左移动：

此外，当从固定时间范围切换到实时视图时，我想“跳转”到更新数据，因为在实时模式下我对“大图”不感兴趣。我可能想手动缩小，或向后平移等，但在切换时它应该通过我的代码“缩放”到新的更新点。

我似乎使用了错误的搜索词。也许有人知道要传递的正确配置选项？

我如何扩展：

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/time\r\n<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
    }
  }
}

【问题讨论】：

标签： position scatter plotly.js

【解决方案1】：

您可以通过在 x 轴布局属性中使用范围值来实现。

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

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

【讨论】：