中心绘图轨迹

Question

我需要使跟踪居中，因为在加载时不会显示跟踪，用户应移动视图。 我找不到任何有关此问题的文档或问题。 通过服务从服务器检索数据，然后 我正在使用Angular 7作为前端，并以绘图方式绘制绘图。

页面加载后，绘图如下：Image error。 如果我移动视图，则外观如下：Image okey。

谢谢

示例代码：

private loadPlot(): void {
    const minValues = [];
    const maxValues = [];

    const dataForPlot = [];
    let traceIndex = 0;
    for (const key in this.serverData.data) {
      if (key === 'filename') {
        continue;
      }
      const values = [];

      const colorsForLine = [];
      const markersForLine = [];

      const mean = calculateMean(this.serverData.data[key]);

      const textArray = [];

      this.serverData.data[key].forEach(
        (element, index) => {
          let marker = 'circle';
          const color = getPointColor(element['nc']);
          const elementText = element['value'];
          const value = element['value'];
          if (index === this.serverData.data[key].length - 1) {
            marker = 'diamond-cross';
          }
          values.push(value);
          colorsForLine[index] = color;
          markersForLine[index] = marker;
          textArray[index] = elementText + '<br>' + truncateFilename(this.serverData.data['filename'][index], 50);
        }
      );
      minValues.push(Math.min.apply(null, values.filter((n) => !isNaN(n))));
      maxValues.push(Math.max.apply(null, values.filter((n) => !isNaN(n))));

      const trace = {
        x: this.serverData.dates,
        y: values,
        type: 'scatter',
        mode: 'lines+markers',
        marker: {
          color: colorsForLine,
          symbol: markersForLine,
          size: 5
        },
        line: {
          // color: colorsForLine,
        },
        connectgaps: false,
        name: key,
        description: 'number of ' + key,
        filenames: this.serverData.data['filename'],
        hoverinfo: 'x+text',
        hovertext: textArray
      };
      dataForPlot.push(trace);
      traceIndex++;
    }

    let MINVALUEFORPLOT;
    let MAXVALUEFORPLOT;

    if (this.plotThreshold === undefined) {
      MINVALUEFORPLOT = Math.min.apply(null, minValues) - Math.abs((Math.min.apply(null, minValues) * 0.1));
      MAXVALUEFORPLOT = Math.max.apply(null, maxValues) + (Math.max.apply(null, maxValues) * 0.1);
    } else {
      const height = (this.layoutShapes[this.layoutShapes.length - 1]['y0'] - this.layoutShapes[this.layoutShapes.length - 1]['y1']) * 0.3;
      MINVALUEFORPLOT = this.layoutShapes[this.layoutShapes.length - 1]['y1'] - height;
      MAXVALUEFORPLOT = this.layoutShapes[this.layoutShapes.length - 1]['y0'] + height;
    }


    this.layout = {
      // title: this.chart.name,
      title: this.generatePlotTitle(),
      shapes: [],
      colorway: traceColor.colorRange,
      hovermode: 'closest',
      xaxis: {
        nticks: 10,
      },
      yaxis: {
        type: 'linear',
        range: [MINVALUEFORPLOT, MAXVALUEFORPLOT]
      },
      currentDiv: 'plot'
    };
    this.layout.shapes = this.layoutShapes;
    Plotly.react('plot', dataForPlot, this.layout);

  }