无法使用 plotly JS 显示数组中的正确图例信息

Question

我正在尝试在 HTML div 元素上使用 ploty JS 创建散点图。情节看起来不错，只是我无法在情节上显示正确的图例信息。可以在此 codepen link 中找到可重现的示例。但是，我在 JS 代码下面粘贴：

var fc = [2, 3, 0.5, 1];
var p_mod = [0.05, 0.04, 0.08, 0.09];
var gene = ["gene1", "gene2", "gene3", "gene4"]
var NegLogPvalMod = p_mod.map(x => -Math.log10(x));
var col = ["#BF382A", "#BF382A","#0C4B8E", "#0C4B8E"];
var leg = ["Sig", "Sig", "Not-sig", "Not-sig"];
/* create custom hover text */
    var my_text = [];
    for (var i = 0; i < fc.length; i++) {
        my_text.push('Fold Change: ' + fc[i] + '<br>' +
            '-log 10[p-value]: ' + NegLogPvalMod[i] + '<br>' +
            'Gene: ' + gene[i]);
    }

var trace = {
    x: fc,
    y: NegLogPvalMod,
   text: my_text,
    mode: "markers",
    marker: {
            color: col,
            size: 6,
            line: {
                color: "black",
                width: 0.25
            }
        },
    type: "scatter",
  hovertemplate: '%{text}<extra></extra>',
    hoverinfo: 'skip',
    name: leg
};

var data = [trace];

var layout = {
    hovermode: 'closest',
    title: 'scatter plot',
    showlegend: true,
         xaxis: {
            title: "<b>log2 fold change</b>"
        },
        yaxis: {
            title: "<b>-log10 p-value</b>"
        }
};

Plotly.newPlot(document.getElementById("myDiv"), data, layout, {responsive: true});

目前，trace 0 是唯一显示的图例（见下图）

但是，我希望 Sig 和 Not-sig 分别显示为带有蓝点和红点（在文本的左侧）的图例。我在 plolty JS 文档中找不到类似的示例。因此，我们将不胜感激任何解决此问题的建议。

Answer 1

我已设法完成工作并更新了 Codepen link。但是，我觉得我的解决方案并不优雅。如果有人有使用单个数组中的图例的更好解决方案，那么我将不胜感激。

无法使用 plotly JS 显示数组中的正确图例信息

Cannot display correct legend information from an array using plotly JS

plotly.js