Plotly动态形状选择：时间序列中按类型显隐布局形状的可行性问询

Absolutely, this is totally doable! You can replicate that trace-like toggle functionality for your layout shapes by their type (or a custom identifier) with a bit of intentional setup. Plotly doesn’t have this feature out of the box for shapes, but we can build it using Plotly’s relayout method and custom attributes. Here's a step-by-step breakdown:

1. Add Custom Identifiers to Your Shapes #

First, tag each shape with a clear identifier (I’ll use name for simplicity) that matches the type you want to toggle. This lets us filter shapes later:

const layout = {
  shapes: [
    {
      type: "rect",
      x0: "2023-01-01", x1: "2023-01-07",
      y0: 0, y1: 1, yref: "paper",
      fillcolor: "rgba(255,0,0,0.2)",
      name: "V3" // Tag the shape with its type
    },
    {
      type: "rect",
      x0: "2023-01-08", x1: "2023-01-14",
      y0: 0, y1: 1, yref: "paper",
      fillcolor: "rgba(0,255,0,0.2)",
      name: "V4"
    },
    {
      type: "rect",
      x0: "2023-01-15", x1: "2023-01-21",
      y0: 0, y1: 1, yref: "paper",
      fillcolor: "rgba(0,0,255,0.2)",
      name: "V5"
    }
  ]
};

2. Choose Your Toggle Interface #

You have two main options to let users control visibility, both using Plotly’s relayout method to update the shapes array:

Option A: Dropdown Menu (Updatemenus) #

Add a built-in Plotly dropdown that lets users select predefined visibility sets (like "Show V4 & V5 only"):

layout.updatemenus = [
  {
    buttons: [
      {
        label: "Show All Shapes",
        method: "relayout",
        args: ["shapes", layout.shapes] // Reset to all shapes
      },
      {
        label: "Show V4 & V5",
        method: "relayout",
        args: [
          "shapes",
          layout.shapes.filter(shape => shape.name === "V4" || shape.name === "V5")
        ]
      },
      {
        label: "Show V3 Only",
        method: "relayout",
        args: [
          "shapes",
          layout.shapes.filter(shape => shape.name === "V3")
        ]
      }
    ],
    direction: "down",
    showactive: true,
    x: 0.1,
    y: 1.15
  }
];

Option B: Custom Clickable Legend (Trace-Like Interaction) #

For a more trace-like experience (click a label to toggle individual shape types), build a custom HTML legend and add click handlers to update the chart:

HTML Legend:

<div class="shape-legend">
  <span class="legend-item" data-type="V3" style="color: #ff4444; cursor: pointer;">V3</span>
  <span class="legend-item" data-type="V4" style="color: #44dd44; cursor: pointer;">V4</span>
  <span class="legend-item" data-type="V5" style="color: #4444ff; cursor: pointer;">V5</span>
</div>

JavaScript Handler:

// Save a copy of the original shapes to avoid losing data
const originalShapes = [...layout.shapes];
// Track visibility state for each shape type
const shapeVisibility = {
  V3: true,
  V4: true,
  V5: true
};

// Add click events to legend items
document.querySelectorAll('.legend-item').forEach(item => {
  item.addEventListener('click', () => {
    const shapeType = item.dataset.type;
    // Toggle visibility state
    shapeVisibility[shapeType] = !shapeVisibility[shapeType];
    // Update legend style to reflect state
    item.style.opacity = shapeVisibility[shapeType] ? 1 : 0.5;
    // Filter shapes to only show active ones
    const visibleShapes = originalShapes.filter(shape => shapeVisibility[shape.name]);
    // Update the chart
    Plotly.relayout('your-chart-container-id', 'shapes', visibleShapes);
  });
});

Key Notes #

• The core idea is to filter the original shapes array based on your toggle state, then use Plotly.relayout() to replace the current shapes with the filtered set.
• You can use any custom attribute instead of name (like customdata) if you prefer—just make sure it’s unique to each shape type you want to control.
• This approach works for all shape types (rectangles, lines, etc.), not just the background bars you’re using.

内容的提问来源于stack exchange，提问作者Davor Josipovic