Kombinieren eines Flächendiagramms mit einem Streudiagramm unter Verwendung von plotly.js

Question

Ich verwende plotly.js, um ein Qualitätskontroll-Streudiagramm zu erstellen. Im Wesentlichen kalkuliere ich den Mittelwert und die Standardabweichung meiner Daten und erstelle Qualitätssicherungsbereiche. Der Mittelwert plus 2x der Standardabweichung ist also der untere bzw. obere Grenzwert. Also habe ich hier zwei Beispiele für Plots, einen, der einen Bereich basierend auf einer yAchsenvariablen here schattiert, und einen anderen, der ein einfaches Streuplot here ist. Ist es möglich, diese beiden Plots miteinander zu kombinieren? Gibt es einen besseren Ansatz mit plotly.js? Ich bin neu mit dieser Bibliothek und nicht sicher, ob das überhaupt möglich ist. Alle meine Versuche, diese Plots zu kombinieren, sind gescheitert, also wird jede Hilfe sehr geschätzt, danke!

JS für Streudiagramm

var trace1 = { 
    x: [1, 2, 3, 4, 5], 
    y: [1, 6, 3, 6, 1], 
    mode: 'markers+text', 
    type: 'scatter', 
    name: 'A', 
    marker: { size: 10 } 
}; 

var trace2 = { 
    x: [1.5, 2.5, 3.5, 4.5, 5.5], 
    y: [4, 1, 7, 1, 4], 
    mode: 'markers+text', 
    type: 'scatter', 
    name: 'B', 
    marker: { size: 10 } 
}; 

var data = [ trace1, trace2 ]; 

var layout = { 
    xaxis: { 
    range: [ 0.75, 5.25 ] 
    }, 
    yaxis: { 
    range: [0, 8] 
    }, 
    legend: { 
    y: 0.5, 
    yref: 'paper', 
    font: { 
     family: 'Times New Roman', 
     size: 20, 
     color: 'black', 
    } 
    }, 
    title:'Simple Scatter' 
}; 

Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}); 

JS für Flächendeckung

var stacksDiv = document.getElementById("myDiv"); 
var traces = [ 
    {x: [1,2,3], y: [3,3,3], fill: 'tozeroy'}, 
    {x: [1,2,3], y: [2,2,2], fill: 'none'}, 
    {x: [1,2,3], y: [1,1,1], fill: 'tonexty'} 
]; 
function stackedArea(traces) { 
    for(var i=1; i<traces.length; i++) { 
     for(var j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) { 
      traces[i]['y'][j] += traces[i-1]['y'][j]; 
     } 
    } 
    return traces; 
} 

Plotly.newPlot(stacksDiv, stackedArea(traces), {title: 'stacked and filled line chart'}); 

Answer 1

var trace2 = { 
    x: [-0.100387678599, -0.841098362432, -0.086900337279, -0.418153015989, -0.197122458852, 0.0391933774019, -0.759329967599, -1.29266640992, 0.950624526622, 1.52725553555, 2.25231901948, 1.84936962902, 0.833618714205, 2.42998331172, 1.73583322891, 3.19694965552, -0.909512478385, 0.983932265051, -0.992449424459, 2.349425425, -1.60550784046, 2.68216122416, 2.22665169157, -0.775707830008, 0.569030921894, 0.310849282625, 2.39935206131, -1.66045702411, 3.76747878057, 3.05333459172, -3.35932368186, 3.43730482552, -3.07611001807, -0.842850343527, 3.50008556345, 0.165085596719, -0.339561268287, -1.74747448536, 3.56148886503, 1.8353330132, -1.90428086596, -0.912688959871, -2.37825362991], 
    y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708], 
    z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732], 
    text: ["size:4", "size:9", "size:6", "size:5", "size:1", "size:1", "size:5", "size:6", "size:10", "size:1", "size:11", "size:5", "size:11", "size:8", "size:4", "size:2", "size:9", 
      "size:11", "size:9", "size:9", "size:4", "size:2", "size:7", "size:6", "size:3", "size:4", "size:3", "size:5", "size:10", "size:9", "size:3", "size:7", "size:5", "size:5", 
      "size:10", "size:4", "size:3", "size:1", "size:7", "size:11", "size:5", "size:3", "size:4"], 
    mode: 'markers', 
    marker: { 
     // color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'], 
     color : "green", 
     size: [ 4, 9, 6, 5, 1, 1, 5, 6, 10, 1, 11, 5, 11, 8, 4, 2, 9, 
       11, 9, 9, 4, 2, 7, 6, 3, 4, 3, 5, 10, 9, 3, 7, 5, 5, 
       10, 4, 3, 1, 7, 11, 5, 3, 4], 
     symbol: 'circle', 
     line: { 
      color: 'rgb(204, 204, 204)', 
      width: 1 
     }, 
     opacity: 0.9 
    }, 
    type: 'scatter3d', 
    name: 'category2', 
    title:'title2', 
}; 

var trace1 = { 
     x: [2.0522699155, 1.60603507656, 3.98979463908, 0.800202189637, 4.16783956636, 2.95313983879, 5.0, 3.41759950759, 4.02288405655, 2.94010152597, 3.63034369928, 3.16032847173, 2.84232962045, 3.64970293361, 2.66786174731, 1.03749190769, 2.17855088691, 0.942208241258, 2.78224452996, 3.30213001295, 3.22296192645, 2.472764363, 3.00401653801, 2.63945959172, 1.9266212172], 
     // y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708], 
     y : [3.80802778444, 3.24303183309, 3.90459129274, 1.48507886338, 5.0, 3.21697257561, 0.0, 3.59728336393, 3.48023605288, 4.04693568382, 1.93203256347, 1.94519341179, 2.93007560776, 4.57633585255, 4.09858787614, 1.06912858064, 3.04012649902, 2.20718355604, 2.38150971107, 2.12206089387, 1.92348823442, 2.53393341278, 3.75945720171, 2.43140112455, 2.44696845761], 
     // z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732], 
     z : [3.97479986154, 2.20251587247, 1.91885091958, 3.06216739476, 3.37245559999, 2.23122564522, 2.35036121228, 2.62375347613, 1.71093693468, 1.23114425973, 1.67539170543, 0.807655555521, 4.26051739287, 2.32537114197, 3.5798240995, 2.15458204352, 2.75668482729, 1.17333051934, 2.41542282588, 1.87953707438, 2.57418967735, 1.83480174146, 1.65767515867, 4.02426576613, 3.67825997338], 
     text: ["size:4", "size:9", "size:6", "size:5", "size:1", "size:1", "size:5", "size:6", "size:10", "size:1", "size:11", "size:5", "size:11", "size:8", "size:4", "size:2", "size:9", 
       "size:11", "size:9", "size:9", "size:4", "size:2", "size:7", "size:6", "size:3", "size:4", "size:3", "size:5", "size:10", "size:9", "size:3", "size:7", "size:5", "size:5", 
       "size:10", "size:4", "size:3", "size:1", "size:7", "size:11", "size:5", "size:3", "size:4"], 
     mode: 'markers', 
     marker: { 
      //color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'], 
      color : "blue", 
      size: [3, 1, 11, 9, 4, 9, 5, 8, 2, 3, 11, 9, 6, 2, 1, 10, 3, 9, 8, 1, 5, 10, 4, 10, 3], 
      symbol: 'circle', 
      line: { 
       color: 'rgb(204, 204, 204)', 
       width: 1 
      }, 
      opacity: 0.9 
     }, 
     type: 'scatter3d', 
     name : 'category1', 
     title: 'title1' 

    }; 




var data = [trace1,trace2]; 
var layout = {margin: { 
    l: 0, 
    r: 0, 
    b: 0, 
    t: 0 
}, showlegend : true}; 
Plotly.newPlot('myDiv2', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false }); 

In diesem Code habe ich versucht, zwei Grundstücke zu kombinieren.

Alles, was Sie brauchen, ist auf 2 Spuren separat zu machen wie, TRACE1 - Streuung, Trace 2 - line

var data = [TRACE1, trace2];

und anschließend in der Methode configuuration Plotly.new Plot nennen wie folgt,

Plotly.newPlot ('myDiv2', Daten, Layout, {modeBarButtonsToRemove: [ 'sendDataToCloud'], displaylogo: false}) ;

Hoffe, dass hilft!