能否用dygraphs制作Fan Chart？多组lower/value/upper系列阴影图实现问询

Absolutely! You can absolutely build fan charts using dygraphs, and combining multiple sets of lower/value/upper series with shaded bands is totally doable. Let me show you how to implement this with your provided new_df xts object.

Step-by-Step Implementation #

First, make sure you have the required packages loaded (dygraphs and xts). Then we'll build the chart by layering the central value line and each shaded band set:

library(dygraphs)
library(xts)

# Your original data setup
df <- data.frame(
  "value" = c(1,2,3,4,5), 
  "upper1" = c(1.2, 2.3, 3.1, 4.6, 5.9), 
  "lower1" = c(0.5, 1.8, 2.6, 3.7, 4.9), 
  "upper2" = c(1.2, 2.1, 3.5, 4.8, 5.9), 
  "lower2" = c(0.3, 1.4, 2.7, 3.5, 4.8)
)
dates <- c("2014-10-01", "2014-11-01", "2014-12-01", "2015-01-01", "2015-02-01")
time <- as.Date(dates)
new_df <- as.xts(df, order.by = time)

# Build the multi-band fan chart
dygraph(new_df) %>%
  # Add the central value line (make it stand out)
  dySeries("value", label = "Central Value", strokeWidth = 2, color = "#2c3e50") %>%
  # Add shaded area for the first lower/upper band
  dyShading(from = "lower1", to = "upper1", color = "rgba(52, 152, 219, 0.2)") %>%
  # Optional: Add thin lines for the first band's boundaries
  dySeries(c("lower1", "upper1"), label = "Band 1", strokeWidth = 1, color = "#3498db") %>%
  # Add shaded area for the second lower/upper band
  dyShading(from = "lower2", to = "upper2", color = "rgba(231, 76, 60, 0.2)") %>%
  # Optional: Add thin lines for the second band's boundaries
  dySeries(c("lower2", "upper2"), label = "Band 2", strokeWidth = 1, color = "#e74c3c") %>%
  # Tweak chart appearance
  dyOptions(fillAlpha = 0.8) %>%
  dyLegend(show = "always", hideOnMouseOut = FALSE) %>%
  dyRangeSelector(height = 20) %>%
  dyTitle("Multi-Band Fan Chart")

Key Details: #

• Shaded Bands: The dyShading() function is what creates the filled areas between your lower and upper series. Using rgba() colors lets you set transparency, so overlapping bands remain visible.
• Customization: You can adjust the stroke width, colors, and whether to show the boundary lines for each band. If you don't want the boundary lines, just remove the corresponding dySeries() calls for lower1/upper1 and lower2/upper2.
• Scalability: This approach works for as many bands as you need—just repeat the dyShading() (and optional dySeries()) steps for each additional lower/upper pair, using distinct colors to keep things clear.

内容的提问来源于stack exchange，提问作者Cuong.S