切换 (plotly.js - 散点图) y 轴和轨迹的可见性

Question

新 plotly.js （我在angular环境中）

我想将痕迹放在多 select 下拉菜单中。所有 y 轴都相同。为了能够切换这些的可见性。建议...easy/right 方法。

我试图用 css 影响 svg 容器，但没有效果：

Answer 1

对于轴：

var update = {
    'yaxis.visible': false
};
Plotly.relayout(myDiv, update)

对于痕迹：

data = [
    {
        line: {width: 5},
        name: "myName1",
        type: "scatter",
        visible: "legendonly", // Plot trace but hide it to the user
        x:  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        y:  [10, 11, 2, 23, 14, 5, 16, 7, 18, 29, 10]
    },
    {
        line: {width: 5},
        name: "myName2",
        type: "scatter",
        visible: "legendonly" ,// Plot trace but hide it to the user
        x:  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        y:  [10, 1, 12, 13, 4, 25, 16, 17, 8, 19, 20]
    }
];

allTraces=document.getElementById("myDiv").data; // Get data from chart AFTER plotting it.

// Find index of trace-object with "name" property  = "text to find":
result = allTraces.findIndex(obj => { 
    return obj.name === "text to find";
}

// Make specified trace visible to user:
Plotly.restyle(document.getElementById("myDiv"), {"visible": true}, [result]);

切换 (plotly.js - 散点图) y 轴和轨迹的可见性

Toggle visibility of (plotly.js - scatter) y-axis & traces

javascript

css

svg

plotly