使用 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 条痕迹，例如， trace1 -- 分散，trace 2 -- 线

var 数据 = [trace1,trace2];

然后在配置中调用 Plotly.new 绘图方法，如下所示，

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

希望有帮助！