利用css對shiny頁面優化及利用htmlwidgets包建立HTML控件

內容來源：2017年5月20日，樂逗遊戲高級數據分析師在「第十屆中國R會議軟件工具專場」進行《HTTPS最佳安全實踐》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數: 753 用時: 3分鐘

摘要

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

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

利用css對Shiny頁面優化

添加CSS的三種方式

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

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

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

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

三、將樣式直接添加到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結合。

個人分享到此結束，謝謝你們！

相關推薦

推薦文章

• 百度外賣如何作到前端開發配置化
  

• 阿里巴巴前端專家渚薰：H5互動的正確打開方式
  

近期活動

• 直播 | 2017紅象雲騰大數據基礎軟件V5.0發佈暨合做夥伴大會

點擊【www.itdks.com】進入乾貨密道