利用css對shiny頁面優化及利用htmlwidgets包創建HTML控制項

內容來源：2017年5月20日，樂逗遊戲高級數據分析師在「第十屆中國R會議軟體工具專場」進行《利用css對shiny頁面優化及利用htmlwidgets包創建HTML控制項》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。

閱讀字數：753

用時： 3分鐘

摘要

本演講將介紹如何利用CSS對shiny頁面進行個性化設計及在網頁中嵌入視頻；並通過一個詳細案例介紹了利用htmlwidgets包開發HTML控制項，基於D3.JS庫創建簡單的交互桑基圖，包括控制項創建、函數修改、數據調用及與shiny結合的演示。

嘉賓演講視頻地址：http://t.cn/Ro89hHa

利用css對Shiny頁面優化

添加CSS的三種方式

CSS為HTML文檔提供了一種複雜外觀的樣式語言。由於Shiny應用程序用戶界面（UI）是一個HTML文檔，可以使用CSS來控制Shiny應用程序的外觀。

要用CSS美化應用程序，常用的有三種方式。

1、創建一個樣式表，把它放到www目錄文件下：在應用的當前目錄下，創建www文件夾，把CSS樣式放在www目錄里。對Shiny自帶的「03_reactivity」例子添加個性化樣式。

2、把CSS添加到HTML標題中。

3、將樣式直接添加到HTML控制項標籤中：直接在用戶界面中的單個HTML元素中添加CSS樣式，優先順序高於其他的CSS源。

給應用增加登錄窗口

免費的Shiny沒有許可權控制，如果掌握一些基本的CSS知識，就可以輕易地給應用添加一個登錄窗口。

利用htmlwidgets包創建HTML控制項

下載d3plus.zip

利用htmlwidgets包調用d3plus.js庫，生成互動式圖表。

創建新包

創建一個新包，包名為myd3plus，將會生成treemap.R、treemap.ymal和treemap.js三個文件。

創建lib目錄，存放js文件

將下載的d3plus.zip解壓，把裡面的文件d3.js和d3plus.js拷貝至htmlwidgets/lib目錄下。

修改treemap.ymal的文件配置

修改treemap.ymal的文件配置，該文件是用來設置控制項依賴的js庫。

修改treemap.R的文件配置

在treemap.R中，刪除message=message命令，增加data=data命令。

運行devtools::install()對myd3plus包進行安裝。

運行treemap函數

構建簡單數據框，運行treemap函數，查看效果。

與Rmarkdown結合

利用htmlwidgets包創建的控制項，很容易與Rmarkdown和Shiny結合。

我的分享到此結束，謝謝大家！