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

Question

我想使用plotly.js在同一个图中绘制2个绘图。我已经阅读了plotly.js的文档，但无法找到它。任何身体可以帮助吗？

这里是代码片段：

第一条曲线：

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

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

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

第二幅图：

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>