R语言 在dygraph中以交互方式显示/隐藏系列

Question

是否可以在R格式中以交互方式显示/隐藏系列？

这个想法是比较许多时间序列，例如有一个勾选框，可以在其中选择/取消选择序列以显示或隐藏其中任何一个。

我在dygraphs包中找不到这样的选项。例如，这种滴答声图例存在于带有addLayersControl()的包leaflet中。

Answer 1

可以在 R Studio 中使用包 "shiny" 来执行此操作。无需冒险离开R Studio(除非你真的想)。

只要您安装了四个包，此代码块应该适用于任何人。将其用作您自己的数据的起点。我使用了下拉菜单，但 Shiny 也允许您使用复选框进行用户输入。希望这有帮助！

library(shiny)                # to dynamically select/plot variables here
library(tidyverse)            # required for transmute under server logic
library(dygraphs)             
library(magrittr)             # allows you to use pipes with dygraph()
a <- (1:10)                   # create example dataframe for dygraphs to plot
b <- rnorm(10, mean = 2)      
c <- rnorm(10, mean = 3)
d <- rnorm(10, mean = 4)
df <- as.data.frame(cbind(a,b,c,d))     
# User interface ----     # shiny does checkboxes too, modify accordingly
ui3 <- fluidPage(
titlePanel("Example"),

sidebarLayout(                                           # dropdown menus
sidebarPanel(
selectInput("column1", label = "Select a variable",  
choices = c("None Selected", "Column B", "Column C", "Column D"), 
selected = "Column B"),

selectInput("column2", label = "Select a variable", 
choices = c("None Selected", "Column B", "Column C", "Column D"), 
selected = "None Selected")),

mainPanel(dygraphOutput("dygraph"))
)
)
# Server logic ----
server3 <- function(input, output) {
output$dygraph <- renderDygraph({

datax <- switch(input$column1,       # With no mapping for "None Selected"...
"Column B" = 2,     # ... nothing is graphed.
"Column C" = 3,
"Column D" = 4)

datay <- switch(input$column2, 
"Column B" = 2,
"Column C" = 3,
"Column D" = 4)


df2 <- df |>                            # df2 is dynamic, based on user input
transmute(a, df[datax], df[datay])    # ... df2 passed to dygraph()

dygraph(df2, main = "Fancy Plot Title") |>
dyAxis("x", label = "Time") |>
dyAxis("y", label = "Value")

})

}
# Run app ----
shinyApp(ui3, server3)           # you can run this in a browser if you prefer

Answer 2

我知道这个问题是关于R和4岁的，但我在JavaScript中遇到了同样的需求。我为我自己的JS整理了一个实现，认为其他人可能会感兴趣。

就我而言，我正在显示设备的历史数据(电压、电流等)。 其中一部分涉及为图形构建可读的标题，例如"生成器 1：电压、电流"。data数组包含我的所有结果，每个数据集的property是可读标题。当我循环构建我的主要标题时，我会这样做：

var thistitle = data[i].property;
var thislink = `<a href="#" onclick="HV3_toggleVis(${i})">${thistitle}</a>`
var visArray = [];        
for(var i=0;i<data.length;i++) { //for each requested dataset
visArray.push(true); //build out boolean visibility array
}

当我构建我的图形时，我确实：

window.dygraphs.history_output = new Dygraph([...]);
window.dygraphs.history_output.visArray = visArray;

现在，每个数据集的布尔数组都存储为图形对象的属性。

当我构建我的游戏时，我会：

var thistitle = data[i].property;
var thislink = `<a href="#" onclick="HV3_toggleVis(${i})">${thistitle}</a>`
titles[data[i].name].titlestring += thislink;

现在我有一系列用于运行可见性切换的链接。 对于我的函数，我有：

function HV3_toggleVis(seriesIndex) {
var visArray = window.dygraphs.history_output.visArray; //i like short working names for vars.

visArray[seriesIndex] = !visArray[seriesIndex]; //toggle boolean
window.dygraphs.history_output.setVisibility(seriesIndex,visArray[seriesIndex]); //toggle the selected dataset
window.dygraphs.history_output.visArray = visArray; //save the changes to the object
}

将来我可能会尝试将其放在传说中，但现在这很可爱。 下面是它的实际示例。我还没有把它复制到我的实时单元，所以数据集只是一行，但你明白了：

https://i.imgur.com/K3mq0oA.png