如何仅用JavaScript在Shiny中实现点击触发plot_ly绘图？

以下是修改后的完整Shiny应用代码，纯JavaScript实现点击文本生成指定Plotly图表的功能：

library(shiny)

ui <- fluidPage(
  # 加载Plotly的JavaScript库
  tags$script(src = "https://cdn.plot.ly/plotly-latest.min.js"),
  tags$p(id = 'g', class = 'newClass', '点击我显示鸢尾花花瓣长度图表'),
  # 使用div作为图表容器，设置合适的宽高
  tags$div(id = "demo", style = "width: 800px; height: 600px;"),
  tags$script(HTML("
    // 将R的iris数据集转换为JavaScript可处理的结构
    const irisData = {
      Species: ['setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'setosa', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'versicolor', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica', 'virginica'],
      Petal_Length: [1.4, 1.4, 1.3, 1.5, 1.4, 1.7, 1.4, 1.5, 1.4, 1.5, 1.5, 1.6, 1.4, 1.1, 1.2, 1.5, 1.3, 1.4, 1.7, 1.5, 1.7, 1.5, 1.0, 1.7, 1.9, 1.6, 1.6, 1.5, 1.4, 1.6, 1.6, 1.5, 1.5, 1.4, 1.5, 1.2, 1.3, 1.4, 1.3, 1.5, 1.3, 1.3, 1.3, 1.6, 1.9, 1.4, 1.6, 1.4, 1.5, 1.4, 4.7, 4.5, 4.9, 4.0, 4.6, 4.5, 4.7, 3.3, 4.6, 3.9, 3.5, 4.2, 4.0, 4.7, 3.6, 4.4, 4.5, 4.1, 4.5, 3.9, 4.8, 4.0, 4.9, 4.7, 4.3, 4.4, 4.8, 5.0, 4.5, 3.5, 3.8, 3.7, 3.9, 5.1, 4.5, 4.5, 4.7, 4.4, 4.1, 4.0, 4.4, 4.6, 4.0, 3.3, 4.2, 4.2, 4.2, 4.3, 3.0, 4.1, 6.0, 5.1, 5.9, 5.6, 5.8, 6.6, 4.5, 6.3, 5.8, 6.1, 5.1, 5.3, 5.5, 5.0, 5.1, 5.3, 5.5, 6.7, 6.9, 5.0, 5.7, 4.9, 6.7, 4.9, 5.7, 6.0, 4.8, 4.9, 5.6, 5.8, 6.1, 6.4, 5.6, 5.1, 5.6, 6.1, 5.6, 5.5, 4.8, 5.4, 5.6, 5.1, 5.1, 5.9, 5.7, 5.2, 5.0, 5.2, 5.4, 5.1]
    };

    // 获取触发元素和图表容器
    const trigger = document.getElementById('g');
    const plotContainer = document.getElementById('demo');
    let plotCreated = false;

    // 点击事件处理逻辑
    trigger.onclick = function() {
      // 防止重复创建图表
      if (!plotCreated) {
        // 构造Plotly数据轨迹，对应R中plot_ly的参数
        const trace = {
          x: irisData.Species,
          y: irisData.Petal_Length,
          type: 'box', // 默认箱线图，可改为'scatter'（散点）、'bar'（柱状）等
          name: 'Petal Length'
        };

        // 配置图表布局
        const layout = {
          title: '鸢尾花花瓣长度按品种分布',
          xaxis: { title: '品种' },
          yaxis: { title: '花瓣长度' }
        };

        // 在容器中生成图表
        Plotly.newPlot(plotContainer, [trace], layout);
        plotCreated = true;
      }
    };
  "))
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

关键修改说明 #

• 加载Plotly库：通过tags$script引入官方CDN，确保前端能调用Plotly的绘图API
• 数据集转换：将R原生的iris数据集转换成JavaScript对象，保证数据与原需求一致
• 容器调整：用div替代原p标签作为图表容器，设置固定宽高确保图表正常渲染
• 点击事件优化：添加plotCreated标记避免重复点击重复生成图表，同时构造与plot_ly(iris, x = ~Species, y = ~Petal.Length)对应的Plotly参数（默认箱线图，可修改type调整图表类型）

内容的提问来源于stack exchange，提问作者manu p