javascript - 如何在 plotly.js 的同一个图中绘制两个图

Question

我想使用 plotly.js 在同一张图中绘制 2 个图。我已经浏览了 plotly.js 的文档，但找不到它。任何机构都可以提供帮助吗？

这是代码片段:

第一个 plotly :

    var data4 = [ {
        z: z,
        x: x,
        y: y,
        type: 'contour'
    }
];

var layout = {
  title: 'Simple Contour Plot'
}

Plotly.newPlot('visualization2', data4, layout);

第二个 plotly :

 var trace = {
  x: x11,
  y: x21,
  mode: 'lines+markers'
};

var data3 = [ trace];

 var layout = {
  title:'Line and Scatter Plot',
  height: 400,
  width: 480
 };

Plotly.newPlot('visualization3', data3, layout);

我想将这两个绘制在一个图中。注:第一个是等高线图，第二个是线图。

Answer 1

您可以将许多迹线放入您希望绘制的数据中，它会绘制它们。

每个图表也只能有 1 个标题，但是，您可以有多个轴标题。

var firstPlotTrace = {
    z: z,
    x: x,
    y: y,
    type: 'contour'
    name: 'yaxis data'
};

var secondPlotTrace = {
    x: x11,
    y: x21,
    mode: 'lines+markers'
    name: 'yaxis2 data'
};

var plotData = [firstPlotTrace, secondPlotTrace];

var layout = {
    title: 'Double Plot Title',
    height: 400,
    width: 400,
    yaxis: {title: 'Simple Contour Plot Axis', range: [-20, 20]}
    yaxis2: {title: 'Line and Scatter Plot Axis', range: [-20, 20]}
};

Plotly.newPlot('plotDiv', plotData, layout);

HTML -

<div id="plotDiv" style="height: 400px; width: 400px;"></div>