在PlotlyJS中用趋势绘制折线图

Question

我正在尝试使用PlotlyJS生成折线图。但是，我没有得到在折线图下方为其生成额外趋势种类部分的配置。我什至不知道本节的用语，我们可以在其中滑动以限制图表的显示区域。

任何人都可以帮忙。谢谢。

/* Prepare the data */
this.plotData = responseData.map(dataItem => {
    let x = [];
    let y = [];

    const displacementData = JSON.parse(dataItem[3]);

    displacementData.forEach(element => {
      x.push(new Date(element.ts));
      y.push(Number(element.v));
    });

    /* Add null for empty data to display respective legends in plot */
    if (!x.length) x = [null];
    if (!y.length) y = [null];

    const legendTag = dataItem[0].name + ' (' + dataItem[0].unit + ')';
    const legendColor = dataItem[0].lineColor;

    const formattedData = {
      x,
      y,
      line: {
        color: legendColor,
        width: 1
      },
      mode: 'lines+markers',
      name: legendTag,
    };
    return formattedData;
});    

/* Prepare the layout */
const layout = {
  showlegend: true,
  legend: {
    x: 0.4,
    y: 1.3,
    orientation: 'h'
  },
  xaxis: {
    title: 'X - TIMESTAMP',
    titlefont: {
      family: "sans-serif",
      size: 10,
    },
    type: 'date',
    range: [new Date(this.params['queryStartTime']), new Date(this.params['queryEndTime'])],
    linecolor: '#ededed',
    linewidth: 1
  },
  yaxis: {
    title: 'Displacement(mm)',
    titlefont: {
      family: "sans-serif",
      size: 12,
    },
    zerolinecolor: '#000',
    zerolinewidth: 1,
    linecolor: '#ededed',
    linewidth: 1,
    tickcolor: '#000',
    ticklen: 8,
  },
  autosize: false,
  width: 1049,
  height: 500,
  margin: {
    l: 50,
    r: 50,
    b: 100,
    t: 100,
    pad: 4
  },
}
const MODEBAR = [[
  'toImage',
  'zoomIn2d',
  'zoomOut2d',
  'resetScale2d',
  'pan2d',
  'select2d',
  'lasso2d']];

/* Plot */
Plotly.newPlot('displaceLineChartSection', this.plotData, layout, { modeBarButtons: MODEBAR, displaylogo: false, responsive: true });