使用plotly.js

Question

將散點圖與散點圖結合使用我使用plotly.js來構建質量控制散點圖。所以本質上我計算了我的數據的平均值和標準差，並創建了質量控制置信度範圍。所以平均加2倍標準差將分別是越低越高的閾值。所以我在這裏有兩個陰謀的例子，一個陰影基於yAxis變量here，另一個是簡單的散點圖here。這兩塊地塊可以結合在一起嗎？ plotly.js有更好的方法嗎？我新使用這個庫，並不確定這是否可能。我所有將這些情節組合在一起的嘗試都失敗了，因此非常感謝任何幫助，謝謝！

JS的散點圖

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的區域覆蓋

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 }); 

在這段代碼中我曾嘗試2個情節結合起來。

所有你需要的是讓2個痕跡seperately一樣， TRACE1 - 散，道2 - 線

VAR數據= [TRACE1，TRACE2]。

，然後在configuuration調用Plotly.new plot方法如下，

Plotly.newPlot（ 'myDiv2'，數據，佈局，{modeBarButtonsToRemove：[ 'sendDataToCloud']，displaylogo：假}） ;

希望有幫助！