Quarto Dashboards 教程 3:Dashboard Data Display

2024-04-26 07:36

本文主要是介绍Quarto Dashboards 教程 3:Dashboard Data Display,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

「写在前面」

学习一个软件最好的方法就是啃它的官方文档。本着自己学习、分享他人的态度,分享官方文档的中文教程。软件可能随时更新,建议配合官方文档一起阅读。推荐先按顺序阅读往期内容:
1.quarto 教程 1:Hello, Quarto
2.quarto 教程 2:Computations
3.quarto 教程 3:Authoring
4.Quarto Dashboards 教程 1:Overview
5.Quarto Dashboards 教程 2:Dashboard Layout


目录

  • 1 图 Plots
    • 1.1 htmlwidgets
    • 1.2 R Graphics
  • 2 表格 Tables
    • 2.1 kable
    • 2.2 DT
  • 3 数值框 Value Boxes
    • 3.1 Icon and Color
    • 3.2 Shiny
    • 3.3 Markdown Syntax
  • 4 文本内容 Text Content
    • 4.1 Content Cards
    • 4.2 Content within Cells
    • 4.3 Leading Content
    • 4.4 Dynamic Content
  • 5 单元输出 Cell Output
    • 5.1 Dynamic Titles
    • 5.2 Excluded Cells
    • 5.3 Expression Printing
    • 5.4 Card Layout

官网教程:https://quarto.org/docs/dashboards/data-display.html

仪表盘是用于提供导航和呈现数据的组件组合。下面本文将介绍如何使用图、表格、数值框来呈现数据,以及如何在仪表盘中包含叙述性内容。

1 图 Plots

图是迄今为止仪表板中显示的最常见的内容类型。支持基于 JavaScript 的交互式绘图(例如 Altair 和 Plotly)和基于标准光栅的绘图(例如 Matplotlib 或 ggplot2)。

下面本文提供了一些在仪表盘中包含绘图的特定于语言的提示和技术,本教程只展示了 R 语言,Python 语言见官方文档。

1.1 htmlwidgets

htmlwidgets 框架为 JavaScript 数据可视化库提供高级 R 绑定。一些流行的 htmlwidgets 包括 Plotly、Leaflet、dygraphs。

您可以像使用普通 R plots 一样使用 htmlwidgets。例如,以下是我们嵌入 Leaflet 地图的方法:

library(leaflet)
leaflet() %>%
addTiles() %>%
addMarkers(lng=174.768, lat=-36.852,
popup="The birthplace of R")
alt

CRAN 上有几十个提供 htmlwidgets 的包。您可以在 htmlwidgets showcase 中找到几个更流行的 htmlwidgets 的示例用法,并浏览 gallery 中的所有可用 widgets。

1.2 R Graphics

您可以在仪表盘中使用标准 R 栅格图形(base、lattice、grid,等)创建的任何图。将标准 R 图形与静态仪表盘一起使用时,您需要更加注意使绘图的大小适合页面布局。请注意,这对于交互式 Shiny 仪表盘中的绘图来说不是问题,因为所有绘图类型均由 Shiny 动态调整大小。

静态仪表盘中良好的尺寸调整行为的关键是定义 knitr fig-widthfig-height 选项,使绘图能够尽可能紧密地适合其布局容器。

下面是一个布局示例,其中包含来自 R 基础图形的 3 个图:

## Row {height="65%"}

```{r}
#| fig-width: 10
#| fig-height: 8
plot(cars)
```

## Row {height="35%"}

```{r}
#| fig-width: 5
#| fig-height: 4
plot(pressure)
```

```{r}
#| fig-width: 5
#| fig-height: 4
plot(airmiles)
```
alt

我们为每个图指定了明确的fig-heightfig-width,以便它们的渲染大小尽可能接近其布局容器。请注意,这些尺寸的理想值通常需要通过实验来确定。

Tip
对于静态仪表盘,使用基于 JavaScript 的绘图有利有弊。虽然基于 JavaScript 的绘图可以比静态绘图更好地处理调整大小以填充其容器,但它们还将基础数据直接嵌入到已发布的页面中(每个绘图一份数据集的副本),这可能会导致加载时间变慢。

对于交互式 Shiny 仪表盘,所有绘图类型的大小都是动态调整的,因此调整大小行为不像静态仪表盘那样需要担心。

2 表格 Tables

您可以通过以下两种方式之一将数据表包含在仪表盘中:

  • 作为简单的表格显示。
  • 作为一个交互式小部件,包括排序和过滤。

下面我们提供了一些在仪表盘中包含表格的特定于语言的提示和技术。

有许多 R 包可用于生成表格输出。本文将在下面介绍两种更流行的方法(kable 和 DT)。

2.1 kable

简单的 markdown 表非常适合少量记录(即 20-250 行)。使用knitr::kable()函数输出 markdown 表:

```{r}
knitr::kable(mtcars)
```
alt

仪表盘中的简单 markdown 表格会自动填充其容器(根据需要水平和垂直滚动)。

2.2 DT

DT 包(DataTables JavaScript 库的接口)可以将 R 矩阵或数据框显示为支持过滤、分页和排序的交互式 HTML 表。

要包含 DataTable,请使用DT::datatable函数:

```{r}
library(DT)
datatable(mtcars)
```
alt

Options

请注意,仪表盘内会自动设置一些DT选项,以确保它们在不同尺寸的卡片中良好显示。选项默认值为:

options(DT.options = list(
bPaginate = FALSE,
dom = "ifrt",
language = list(info = "Showing _TOTAL_ entries")
))

您可以根据需要指定替代选项来覆盖这些默认值。

3 数值框 Value Boxes

数值框是在仪表盘中突出显示简单值的好方法。例如,这是一个包含三个数值框的仪表盘行:

alt

以下是您可以用来创建这些数值框的代码。请注意,我们在本示例中混合使用了 Python 和 R 单元来说明每种语言的语法。另请注意,我们假设变量 articlescommentsspam 是先前在文档中计算的。

## Row 

```{python}
#| content: valuebox
#| title: "Articles per day"
#| icon: pencil
#| color: primary
dict(
value = articles
)
```

```{python}
#| content: valuebox
#| title: "Comments per day"
dict(
icon = "chat",
color = "primary",
value = comments
)
```

```{r}
#| content: valuebox
#| title: "Spam per day"
list(
icon = "trash",
color = "danger",
value = spam
)
```

您可以选择在 YAML 中或在单元格打印的 dict()list()(分别适用于 Python 和 R)中指定数值框选项。当您希望图标或颜色根据值动态变化时,后一种语法很方便。

3.1 Icon and Color

数值框中使用的icon可以是 2,000 个可用的bootstrap icons中的任何一个。

color可以是任何 CSS 颜色值,但是有一些专为仪表盘调整的颜色别名,您可能会考虑默认使用:

Color AliasDefault Theme Color(s)
primaryBlue
secondaryGray
successGreen
infoBright Blue
warningYellow/Orange
dangerRed
lightLight Gray
darkBlack

虽然别名适用于所有themes,但它们对应的颜色有所不同。

3.2 Shiny

在 Shiny 交互式仪表盘中,您可以拥有根据应用程序状态动态更新的数值框。有关如何执行此操作的详细信息是特定于语言的:

使用 bslib::value_box() 函数以及从 bsicons 包中绘制的可选图标。例如:

```{r}
library(bslib)
library(bsicons)
value_box(
title = "Value",
value = textOutput("valuetext"),
showcase = bs_icon("music-note-beamed")
)
```

3.3 Markdown Syntax

您还可以使用纯 Markdown 创建数值框,在这种情况下,您通常会通过内联表达式包含该值。例如:

## Row

::: {.valuebox icon="pencil" color="blue"}
Articles per day

`{python} articles`
:::

4 文本内容 Text Content

虽然您经常使用绘图和表格填充仪表盘卡片,但您也可以在仪表盘中的任何位置包含任意的 markdown 内容。

4.1 Content Cards

下面是一个仪表盘,其中一列的最后一张卡片是纯 markdown:

alt

要做到这一点,只需在其他单元格旁边包含一个.carddiv:

## Column

```{python}
#| title: Population
px.area(df, x="year", y="pop", color="continent",
line_group="country")
```

```{python}
#| title: Life Expectancy
px.line(df, x="year", y="lifeExp", color="continent",
line_group="country")
```

::: {.card}
Gapminder combines data from multiple sources into
unique coherent time-series that can’t be found
elsewhere. Learn more about the Gampminder dataset at
<https://www.gapminder.org/data/>.
:::

请注意,如果您使用的是 Jupyter Notebook 进行创作,则 markdown 单元格将自动变为.Carddiv(即它们不需要显式的::: div 封套)。

4.2 Content within Cells

要在单元格输出的同时包含内容,只需将单元格和内容都包含在.card div 中即可。例如:

::: {.card title="Life Expectancy"}

```{python}
px.line(df, x="year", y="lifeExp", color="continent",
line_group="country")
```

Gapminder combines data from multiple sources into
unique coherent time-series that can’t be found
elsewhere. Learn more about the Gampminder dataset at
<https://www.gapminder.org/data/>.
:::

4.3 Leading Content

包含在仪表盘最顶部的内容(而不是明确包含在 .content div 中)被视为主导内容,并且将按原样包含,不带卡片样式(例如,无边框)。例如:

---
title: "My Dashboard"
format: dashboard
---

This content will appear above all of the other
rows/columns, with no border.

## Row

```{r}
print("")
```
alt

4.4 Dynamic Content

您可以使用内联表达式使文本内容动态化。例如,这里有一行包含使用 Python 表达式的文本内容:

::: {.card}
The sample size was `{python} sample`. The mean reported
rating was `{python} rating`.
:::

5 单元输出 Cell Output

notebook 或源文档中每个计算单元的输出将包含在卡片中。下面我们描述了创建卡片时要遵守的一些特殊规则。

5.1 Dynamic Titles

您可以通过打印title=表达式作为单元格的第一个输出来创建动态title(与将title=包含为 YAML 单元格选项相反)。例如:

```{r}
library(leaflet)

lat <- 48
long <- 350

cat("title=", "World Map at", lat, long)

leaflet() |> addTiles() |>
setView(long, lat, zoom = 2)
```

5.2 Excluded Cells

不产生输出的单元不会成为卡片(例如,用于导入包、加载和过滤数据等的单元)。如果某个单元产生了您想要排除的意外输出,请向该单元格添加output: false选项:

```{python}
#| output: false
# (code that produces unexpected output)
```

5.3 Expression Printing

默认情况下,顶级表达式的所有输出都显示在仪表盘中。这意味着可以轻松地从一个单元格生成多个图。例如:

```{python}
#| title: "Tipping Behavior"
px.box(df, x="sex", y="total_bill", color="smoker")
px.violin(df, x="sex", y="total_bill", color="smoker")
```

此行为对应于 Jupyter shell interactivity 的"all"设置。您可以使用ipynb-shell-interactivity选项在 Quarto 中自定义此行为。

5.4 Card Layout

如果一个单元格产生多个输出,您可以使用单元格布局选项来组织它们的显示。例如,这里我们修改示例以使用layout-ncol选项并排显示绘图:

```{python}
#| title: "Tipping Behavior"
#| layout-ncol: 2
px.box(df, x="sex", y="total_bill", color="smoker")
px.violin(df, x="sex", y="total_bill", color="smoker")
```
alt

有关自定义布局的其他文档,请参阅有关Figures的文章。


「结束」

注:本文为个人学习笔记,仅供大家参考学习,不得用于任何商业目的。如有侵权,请联系作者删除。

alt

本文由 mdnice 多平台发布

这篇关于Quarto Dashboards 教程 3:Dashboard Data Display的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/936966

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型,它综合考虑了土壤-水分-大气以及植被间的相互作用;是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程,使其能够精确的模拟土壤中水分的运动,而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者

论文翻译:arxiv-2024 Benchmark Data Contamination of Large Language Models: A Survey

Benchmark Data Contamination of Large Language Models: A Survey https://arxiv.org/abs/2406.04244 大规模语言模型的基准数据污染:一项综述 文章目录 大规模语言模型的基准数据污染:一项综述摘要1 引言 摘要 大规模语言模型(LLMs),如GPT-4、Claude-3和Gemini的快

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机(Reduced Instruction SetCom

前端技术(七)——less 教程

一、less简介 1. less是什么? less是一种动态样式语言,属于css预处理器的范畴,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。 less的中文官网:https://lesscss.cn/ 2. less编译工具 koala 官网 http://koala-app.

【Shiro】Shiro 的学习教程(三)之 SpringBoot 集成 Shiro

目录 1、环境准备2、引入 Shiro3、实现认证、退出3.1、使用死数据实现3.2、引入数据库,添加注册功能后端代码前端代码 3.3、MD5、Salt 的认证流程 4.、实现授权4.1、基于角色授权4.2、基于资源授权 5、引入缓存5.1、EhCache 实现缓存5.2、集成 Redis 实现 Shiro 缓存 1、环境准备 新建一个 SpringBoot 工程,引入依赖:

CentOS下mysql数据库data目录迁移

https://my.oschina.net/u/873762/blog/180388        公司新上线一个资讯网站,独立主机,raid5,lamp架构。由于资讯网是面向小行业,初步估计一两年内访问量压力不大,故,在做服务器系统搭建的时候,只是简单分出一个独立的data区作为数据库和网站程序的专区,其他按照linux的默认分区。apache,mysql,php均使用yum安装(也尝试

Windows环境利用VS2022编译 libvpx 源码教程

libvpx libvpx 是一个开源的视频编码库,由 WebM 项目开发和维护,专门用于 VP8 和 VP9 视频编码格式的编解码处理。它支持高质量的视频压缩,广泛应用于视频会议、在线教育、视频直播服务等多种场景中。libvpx 的特点包括跨平台兼容性、硬件加速支持以及灵活的接口设计,使其可以轻松集成到各种应用程序中。 libvpx 的安装和配置过程相对简单,用户可以从官方网站下载源代码

使用Spring Boot集成Spring Data JPA和单例模式构建库存管理系统

引言 在企业级应用开发中,数据库操作是非常重要的一环。Spring Data JPA提供了一种简化的方式来进行数据库交互,它使得开发者无需编写复杂的JPA代码就可以完成常见的CRUD操作。此外,设计模式如单例模式可以帮助我们更好地管理和控制对象的创建过程,从而提高系统的性能和可维护性。本文将展示如何结合Spring Boot、Spring Data JPA以及单例模式来构建一个基本的库存管理系统