如何在Quarto文档的shinyLive代码块中加载本地CSV文件？

核心实现逻辑 #

shinyLive支持通过相对路径读取和Quarto文档同目录的本地CSV文件，渲染Quarto文档时，CSV会被自动打包到输出的HTML资源中，用户打开成品文档即可直接使用交互式图表，无需手动上传数据。

具体操作步骤 #

• 第一步：整理文件结构
  将你的Quarto文档（比如命名为shinylive-csv-demo.qmd）和目标CSV文件（比如sales-data.csv）放在同一文件夹下，确保路径层级一致。

• 第二步：编写Quarto文档代码
  在文档的YAML头部指定runtime: shinylive，然后在shiny代码块中用相对路径读取CSV，示例如下：

---
title: "ShinyLive 加载本地CSV示例"
format: html
runtime: shinylive
---

## 交互式销售数据可视化

```{r}
# 加载依赖包
library(shiny)
library(ggplot2)

# 用相对路径读取本地CSV（和qmd同目录）
sales_data <- read.csv("sales-data.csv")

# 定义UI
ui <- fluidPage(
  titlePanel("月度销售额趋势"),
  selectInput("product", "选择产品", choices = unique(sales_data$product)),
  plotOutput("sales_plot")
)

# 定义Server
server <- function(input, output) {
  output$sales_plot <- renderPlot({
    filtered_data <- subset(sales_data, product == input$product)
    ggplot(filtered_data, aes(x = month, y = sales)) +
      geom_line(color = "#2c3e50", size = 1.2) +
      labs(x = "月份", y = "销售额") +
      theme_minimal()
  })
}

# 运行Shiny应用
shinyApp(ui, server)

- 第三步：渲染文档
  在终端中运行`quarto render shinylive-csv-demo.qmd`，生成的HTML文件会自动包含CSV资源，用户打开后无需任何额外操作就能使用交互式图表。

### 关键注意事项
- 禁止使用**绝对路径**读取CSV，必须用相对路径（比如`"sales-data.csv"`而非`"/Users/xxx/xxx/sales-data.csv"`），否则shinyLive无法在浏览器环境中定位文件。
- 确保CSV文件编码为UTF-8，避免出现乱码问题。
- 如果CSV文件放在子文件夹中（比如`data/sales-data.csv`），则读取路径改为`"data/sales-data.csv"`即可，渲染时Quarto会自动打包子文件夹中的资源。

内容的提问来源于stack exchange，提问作者Matthew Nocete