shiny 相关问题

我想使用echarts4r插入这个动画：我想使用 echarts4r 插入此动画： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pie Chart Example</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script> </head> <body>  <div id="chart-container" style="width: 600px; height: 400px;"></div> <script> // Your JavaScript code goes here // Define the option object var option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: [ 'Direct Access', 'Email Marketing', 'Affiliate Ads', 'Video Ads', 'Search Engines' ] }, series: [ { name: 'Access Source', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: 'Direct Access' }, { value: 310, name: 'Email Marketing' }, { value: 234, name: 'Affiliate Ads' }, { value: 135, name: 'Video Ads' }, { value: 1548, name: 'Search Engines' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // Create a chart using the provided option var myChart = echarts.init(document.getElementById('chart-container')); myChart.setOption(option); // Set up the interval function let currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000); </script> </body> </html> 查看更多。我试过这个： library(shiny) library(echarts4r) ui <- fluidPage( echarts4rOutput(outputId = "chart1"), actionButton(inputId = "btn1", label = "Click") ) server <- function(input, output, session) { output$chart1 <- renderEcharts4r({ mtcars |> head() |> tibble::rownames_to_column("model") |> e_charts(model, elementId = "chart-container") |> e_pie(carb) |> e_tooltip() }) observe({ req(input$btn1) HTML( " // Create a chart using the provided option var chart1 = echarts.init(document.getElementById('chart-container')); chart1.setOption(option); // Set up the interval function var currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; chart1.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000);" ) }) } shinyApp(ui, server) 但是没有成功。如何使用 echarts4r 包将此效果应用于图表？我还想添加一个停止按钮来停止动画。但我什至无法通过单击创建的按钮来使其工作。这里有一种可能性，它使用您提供的动画 JS 和 shinyjs 的一些细微修改来处理按钮的单击事件。我还实现了您想要的用于停止动画的按钮。 library(shiny) library(shinyjs) library(echarts4r) js_init <- " var chart1 = echarts.init(document.getElementById('chart1')); option = document.getElementById('chart1').htmlwidget_data_init_result.getOpts(); chart1.setOption(option); " js_run_anim <- " var currentIndex = -1; anim = setInterval(function() { var dataLen = option.series[0].data.length; chart1.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000); document.getElementById('btn1').setAttribute('disabled', 'disabled'); document.getElementById('btn2').removeAttribute('disabled'); document.getElementById('btn2').setAttribute('enabled', 'enabled'); " js_stop_anim <- " clearInterval(anim); var dataLen = option.series[0].data.length; chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 , dataIndex: [...Array(dataLen).keys()] }); chart1.dispatchAction({ type: 'hideTip', seriesIndex: 0 , dataIndex: [...Array(dataLen).keys()] }); document.getElementById('btn1').removeAttribute('disabled'); document.getElementById('btn1').setAttribute('enabled', 'enabled'); document.getElementById('btn2').setAttribute('disabled', 'disabled'); " ui <- fluidPage( useShinyjs(), echarts4rOutput(outputId = "chart1"), actionButton(inputId = "btn1", label = "Start animation"), actionButton(inputId = "btn2", label = "Stop animation") ) server <- function(input, output, session) { output$chart1 <- renderEcharts4r({ mtcars |> head() |> tibble::rownames_to_column("model") |> e_charts(model) |> e_pie(carb) |> e_tooltip() }) observeEvent(input$btn1, { onclick("btn1", runjs(paste0(js_init, js_run_anim))) }, ignoreNULL = FALSE) observeEvent(input$btn2, { onclick("btn2", runjs(paste0(js_init, js_stop_anim))) }, ignoreNULL = FALSE) } shinyApp(ui, server)

r shiny echarts4r

回答 1 投票 0

为什么shinyjs的功能在随机选择视频时不起作用？

我想制作一个闪亮的应用程序，它随机选择两个视频之一，并且仅在视频播放后，才会生成一个单选按钮，询问人们是否观看了该视频。这段代码可以正常工作...

r shiny youtube-api shinyjs

回答 1 投票 0

如何根据多个条件增加 y 轴高度以适合 geom_text 标签？

我有一个应用程序，当未选择 p 值时，它看起来像这样：当选择 p 值时，y 轴会扩展，这样星号就不会被截断：其代码行是： {如果（...

r ggplot2 shiny

回答 1 投票 0

R Shiny - 警告：[.data.frame 中的错误：创建两个交互式绘图时选择了未定义的列

我正在 R Shiny 中创建两个交互式图，虽然我可以让一个图显示并工作，但第二个图不断给我“警告：[.data.frame 中的错误：选择了未定义的列...”