我正在使用R,Shiny和Highcharter,我想单击“动作”按钮,然后将树形图细化到我指定的部分。例如,我单击“ mybutton”操作按钮,然后向下钻取到“欧洲”部分。如果用户实际单击TreeMap,则可以捕获click事件。但是,我想反转该过程以单击“动作”按钮,并使TreeMap放大到我手动指定的TreeMap的一部分中。可复制的代码:
library("shiny")
library("highcharter")
library("shinyjs")
library("treemap")
library("viridisLite")
data(GNI2014)
jscode <- "shinyjs.drillDownFunction = function() {
var chart = $('#hcontainer').highcharts();
chart.series[0].data[0].firePointEvent('click');
console.log(chart);}"
jscode2 <- "shinyjs.drillDownFunction2 = function() {
var chart = $('#hcontainer').highcharts();
chart.series[0].data[0].series.hcEvents.click[0]();
console.log(chart);}"
jscode3 <- "shinyjs.drillDownFunction3 = function() {
var chart = $('#hcontainer').highcharts();
Highcharts.fireEvent(chart.series[0].data[0], 'click');
console.log(chart);}"
ui <-
fluidPage(
useShinyjs(),
extendShinyjs(text = jscode, functions = "drillDownFunction"),
extendShinyjs(text = jscode2, functions = "drillDownFunction2"),
extendShinyjs(text = jscode3, functions = "drillDownFunction3"),
fluidRow(
column(width = 8, highchartOutput("hcontainer"))),
fluidRow(
column(width = 4, textOutput("text"))),
fluidRow(
column(width = 4, actionButton("mybutton", "Drill Down into TreeMap"),
actionButton("mybutton2", "Drill Down into TreeMap"),
actionButton("mybutton3", "Drill Down into TreeMap")))
)
server <- function(input, output) {
tm <- treemap(GNI2014, index = c("continent", "iso3"),
vSize = "GNI", vColor = "population",
type = "value", palette = magma(12))
output$hcontainer <- renderHighchart({
hctreemap(tm, allowDrillToNode = TRUE, allowPointSelect = TRUE) %>%
hc_title(text = "Gross National Income World Data")
})
shinyjs::onclick("mybutton", {
js$drillDownFunction()
})
shinyjs::onclick("mybutton2", {
js$drillDownFunction2()
})
shinyjs::onclick("mybutton3", {
js$drillDownFunction3()
})
}
shinyApp(ui = ui, server = server)
答案 0 :(得分:0)
您可能想使用 drillToNode 方法。这里有一个如何在JS中执行此操作的示例:http://jsfiddle.net/BlackLabel/Ljoqbc0h
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
chart.series[0].drillToNode('id_0');
})