如何在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>