使用R shiny和semantic.dashboard创建令人惊叹的网页App

2020-12-06 09:05:52 阅读：454 来源： 互联网

标签：semantic App quakes library dashboard 数据仪表板

semantic.dashboard入门

仪表板（Dashboards）使您可以直观地组织报表，并将其分解为易于阅读的块。因此，与传统报告相比，最终用户可以更轻松地浏览数据。

R包shinydashboard 已经问世了很长时间，它是具有非常不错的功能。但是，使用它构建的应用程序看起来很相似，特别是如果您在多个项目中使用它。许多简单的仪表板应用可能给客户留下不好的印象。这就是semantic.dashboard发挥作用的地方。

semantic.dashboard 是Appsilon创建的Shinydashboard的替代方案，它可以将Fomantic UI组件包含到R Shiny应用程序中。

本文来自《数据黑客》，登录官网可阅读更多精彩资讯和文章。

让我们看一下两个相同的应用程序，第一个app使用shinydashboard ，第二个使用semantic.dashboard：

使用shinydashboard构建的仪表板app

在这里插入图片描述

使用semantic.dashboard构建的仪表板app

在这里插入图片描述

两个App的UI看起来都不错，但是使用semantic.dashboard的UI更有特色。本文中我们将使用semantic.dashboard创建一个简单的网页app。

此处下载本文的源代码：https://appsilon.com/wp-content/uploads/2020/12/semantic-dashboard-code.zip

安装semantic.dashboard

要安装semantic.dashboard，从R控制台执行以下命令：

install.packages("semantic.dashboard")

先创建一个空的仪表盘：

library(shiny)
library(semantic.dashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu()),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

输出如下：

在这里插入图片描述

应用程序界面由dashboardPage定义，页面进一步分为三个元素：

页眉 – dashboardHeader
侧边栏 – dashboardSidebar
主体 – dashboardBody

UI结构与shinydashboard相同，这使得semantic.dashboard非常容易上手。

dashboardHeader有很多参数可以调整，例如，为color参数指定一个值来更改颜色，设置logo_path和logo_allign参数来包含logo，如果要删除标题，指定disabled = TRUE。

将页眉的背景颜色从白色更改为蓝色：

dashboardHeader(color = "blue", inverted = TRUE)

inverted参数将颜色设置为标题背景，而不是标题文本。

输出结果如下：

在这里插入图片描述

接下来，让我们看看如何将元素添加到dashboardSidebar。side参数（默认为左侧）指定边栏大小，设置disable = TRUE可以禁用侧边栏。

增加侧边栏的宽度：

dashboardSidebar(
    size = "wide",
    sidebarMenu(
    menuItem(tabName = "panel1", text = "Panel 1"),
    menuItem(tabName = "panel2", text = "Panel 2")
    )
)

结果如下：

在这里插入图片描述

当单击选项卡时如何显示不同的内容？需要在dashboardBody中定义。

先添加tabItems和两个选项卡，它们对应于侧边栏中的两个选项。默认情况下，第一个选项是选中的，与selected参数指定的一样。在两个面板上应该只有一个文本框可见。

dashboardBody(
    tabItems(
        selected = 1,
        tabItem(
			tabName = "panel1",
			textOutput(outputId = "text1")
		),
		tabItem(
			tabName = "panel2",
			textOutput(outputId = "text2")
		)
	)
)

为了在页面上显示文字，现在需要定义server函数：

server <- function(input, output) {
  output$text1 <- renderText("This is Panel 1")
  output$text2 <- renderText("This is Panel 2")
}

仪表板看起来如下：

在这里插入图片描述

现在您应该掌握了semantic.dashboard的基础知识，接下来让我们继续完善，在页面上显示交互式的地图。

构建一个交互式的仪表板

R有许多内置数据集， quakes是其中之一，它显示了自1964年以来在斐济附近发生的1000次地震事件的地理位置。

Quakes数据集的前几行：

在这里插入图片描述

使用以下选项卡开发仪表板：

Interactive map – 显示斐济附近的地理区域，并带有代表地震事件强度的标记
table – 用表格呈现源数据集

使用leaflet包创建交互式地图，确保已安装它：
install.packages(“leaflet”)

UI遵循第一部分介绍的模式：标题，侧边栏和主体。这次将标题设置为空，大多数差异都在dashboardBody 。结构看起来应该很熟悉，但是有两个新功能：

leafletOutput() – 用于显示交互式地图
dataTableOutput() – 用于显示数据表

为了使地图尽可能大，可以设置CSS样式，下面的代码修改了高度，因此地图始终占据整个屏幕高度。

用户界面的代码：

library(shiny)
library(shiny.semantic)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    size = "wide",
    sidebarMenu(
      menuItem(tabName = "map", text = "Map", icon = icon("map")),
      menuItem(tabName = "table", text = "Table", icon = icon("table"))
    )
  ),
  dashboardBody(
    tabItems(
      selected = 1,
      tabItem(
        tabName = "map",
        tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
        leafletOutput("map")
      ),
      tabItem(
        tabName = "table",
        fluidRow(
          h1("Quakes Table"),
          semantic_DTOutput("quakesTable")
        )
      )
    )
  )
)

接下来修改server函数，创建用于渲染地图和表格的代码。地震活动的大小决定了标记的大小，点击标记可以显示震级，深度（千米）和报告地震活动的站台数量。

后端代码：

server <- function(input, output) {
    output$map <- renderLeaflet({leaflet() %>%
        setView(lng = 179.3355929, lat = -20.4428959, zoom = 6.5) %>%
        addProviderTiles("Esri.WorldStreetMap") %>%
        addCircles(
          data = quakes,
          radius = sqrt(10^quakes$mag) * 30,
          color = "#000000",
          fillColor = "#ffffff",
          fillOpacity = 0.5,
          popup = paste0(
            "Magnitude: ", quakes$mag, "",
            "Depth (km): ", quakes$depth, "",
            "Num. stations reporting: ", quakes$stations
          )
        )})

    output$quakesTable <- DT::renderDataTable(
        semantic_DT(quakes)
    )
}

最终仪表板：

在这里插入图片描述

结论

在这个简单的指南中，我们学习了如何开发简单且美观的Shiny dashboard。希望您已经了解了什么是semantic.dashboard，它提供什么价值，以及如何与其它工具集成。

来源：R-bloggers
作者： Dario Radečić
翻译校对：数据黑客
原文标题：How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard

数据黑客：专注金融大数据，聚合全网最好的资讯和教程，提供开源数据接口。

我们聚合全网最优秀的资讯和教程：

金融大数据
机器学习/深度学习
量化交易
数据工程
编程语言，Python，R，Julia，Scala，SQL

我们提供开源数据接口：

下载国内和国外海量金融数据
API接口，将数据整合到您的平台

标签：semantic,App,quakes,library,dashboard,数据,仪表板
来源： https://blog.csdn.net/weixin_42731853/article/details/110730816

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用R shiny和semantic.dashboard创建令人惊叹的网页App

semantic.dashboard入门

安装semantic.dashboard

构建一个交互式的仪表板

结论