294
技術社區[雲棲]
利用css對shiny頁麵優化及利用htmlwidgets包創建HTML控件
內容來源：2017年5月20日，樂逗遊戲高級數據分析師在“第十屆中國R會議軟件工具專場”進行《HTTPS最佳安全實踐》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。
摘要
本演講將介紹如何利用CSS對shiny頁麵進行個性化設計及在網頁中嵌入視頻；並通過一個詳細案例介紹了利用htmlwidgets包開發HTML控件，基於D3.JS庫創建簡單的交互桑基圖，包括控件創建、函數修改、數據調用及與shiny結合的演示。
嘉賓演講視頻地址：https://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庫。
Stylesheet是用來指定特定的CSS格式，此處不添加。
修改treemap.R的文件配置
在treemap.R中，刪除message=message命令，增加data=data命令。
安裝包
運行devtools::install()對myd3plus包進行安裝。
運行treemap函數
構建簡單數據框，運行treemap函數，查看效果。
與Rmarkdown結合
利用htmlwidgets包創建的控件，很容易與Rmarkdown和Shiny結合。
我的分享到此結束，謝謝大家！
點擊【www.itdks.com】進入幹貨密道
最後更新：2017-07-06 21:32:46