HighChart-Basic
Visualization with HighChart package
Chung Fu,Yang
2016年3月22日
介紹
HighChart的原身是由javascrip在做視覺化時轉化而來，所以爬文的時候找到的resource都是該語言的相關資訊，官方介紹我列於下方，而這個套件其主要目的是為了使Rcoder在coding時能夠簡單的用R語法撰寫出互動型態的視覺畫圖形，並且與pipe-operator可以達到接技的效果，並與dygraph達到同樣的效果，並支援rmarkdown、shiny等做進階視覺化。
套件安裝
一般安裝
- 此文件將以各位了解pipeline的條件下做講解
- 以下為兩種在安裝套件上的code
- 一般在cran中安裝
- 在devtools下以github載入的方式安裝
> #install.packages("highcharter")
> #devtools::install_github("jbkunst/highcharter")因應安裝失敗方式
- 若安裝失敗，可以試著將stringr套件重新安裝。
- 更新rstudio
- 更新R
使用說明
以下會在各種不同圖形開始前做的使用說明，與一些畫圖前的前置作業，並對整體流程做個簡的的說明，方便各位快速上手
起手式
- 首先載入套件
- 讀入所許使用資料
- 資料說明：
- 接下來demo所使用之資料為mtcars內建資料。
- 在這裡為了接下來code的撰寫方便，我稍微說明一下，接下來都會以 %>% 做接技，不懂的人可以下關鍵字“pipe operator”or“dplyr”的套件說明部分
> ## 載入套件
> library(tidyr)
> library(dplyr)
> library(highcharter)
> ## 我自行將highchart()解讀為將在這個架構下進行繪圖
> ## 所以我會先另一個新物件為這個function
> hc <- highchart()
基本概念圖示
- Highcharts主要組成如下圖所示，各位可以先看一下組成圖的每個位置說明
- 包括title、subtitle、…等等
- 這些都是一個function，只要將這些fuction組合起來就能繪出這樣的圖
圖形範例教學
- 接下來會以每一小節示範一種圖形
圓餅圖
打個岔，說明一下為何要從pie開始chart起！？
由於工作關係，常常使用ggplot2進行繪圖但ggplot2在pie的部份因為套件作者的某些原因致使開發並不frendly，所以我在此以pie作為第一部分，彰顯我的不滿！XD
- hc_title(text = “立筠好可愛”)
- 圖形標題
- hc_subtitle(text = “大眼睛又大肚子”)
- 圖形標題下的子註解
- hc_add_series_labels_values()
- 此函數為繪圖主要指令，內部參數我將在下一頁用註解介紹
- 在HighChrt中，在HighChrt架構下皆是以這個函數進行繪圖
- 之後將會介紹不同架構的function
- hc_add_series_labels_values()參數介紹
- highchart()架構下的函數所吃的資料格式以向量與list的類型為主，與ggplot2直接放dataframe有格式上差異
- hc_add_series_labels_values(變數向量,變數對應比例向量, colors = c(“顏色”,“顏色”), type = “圖形種類選擇”, name = “類別名稱”, colorByPoint = TRUE, center = c(‘Y軸位置%’, ‘X軸位置設定%’), size = 圖型大小, dataLabels = list(enabled = 是否在圖形上呈現分類文字))
- hc_tooltip(pointFormat = “{point.y}%”)
>
> data = mtcars
> data %>% group_by(carb) %>% summarise(total=100*round(length(vs)/32,3)) -> temp
> highchart() %>% hc_title(text = "立筠好可愛") %>% hc_subtitle(text = "大眼睛又大肚子") %>%
+ hc_add_series_labels_values(temp$carb, temp$total,
+ colors = substr(terrain.colors(15)[4:9],1,7),type = "pie",
+ name = "carb", colorByPoint = TRUE, center = c('50%', '50%'),
+ size = 300, dataLabels = list(enabled = T)) %>%
+ hc_tooltip(pointFormat = "{point.y}%")螺旋連丸？
- 若想要同時呈現兩個不同的piechart，只需要再加上一樣的函數更動資料向量內容
- hc_add_series_labels_values(data資料2變數,資料2變數所對應資料,…)
- colors = c(“顏色”,“顏色”)
- type = “圖形種類選擇”,
- name = “類別名稱”
- colorByPoint = TRUE
- center = c(‘Y軸位置%’, ‘X軸位置設定%’)
- size = 圖型大小
- dataLabels = list(enabled = 是否在圖形上呈現分類文字)
> ## 因為只是示範，所以我不多加闡述畫出來的東西代表的意義
> data %>% group_by(gear) %>% summarise(total=100*round(length(vs)/32,3)) -> temp1
> ## 只需將
> highchart() %>% hc_title(text = "立筠好可愛") %>% hc_subtitle(text = "大眼睛又大肚子") %>%
+ hc_add_series_labels_values(temp$carb, temp$total,
+ colors = substr(terrain.colors(10)[5:10], 0 , 7), type = "pie",
+ name = "carb", colorByPoint = TRUE, center = c('20%', '50%'),
+ size = 250, dataLabels = list(enabled = T)) %>%
+ hc_tooltip(pointFormat = "{point.y}%") %>%
+ hc_add_series_labels_values(temp1$gear, temp1$total,
+ colors = substr(terrain.colors(23)[21:23], 0 , 7), type = "pie",
+ name = "gear", colorByPoint = TRUE, center = c('80%', '50%'),
+ size = 250, dataLabels = list(enabled = T))直方圖
- 這裡只需要對type的部分做更改，就能繪出bar-chart
- hc_add_series_labels_values(…,type = “column”)
- highchart函數有個特性就是，當你在指令內新增一個並不存在於這個指令的arument的時候，不會產生error只會沒顯示效果出來
- 所以我複製上面的code改了參數column其餘都不改，他還是能運作
> ## 在這裡我讓她隨機選色
> highchart() %>% hc_title(text = "立筠好可愛") %>% hc_subtitle(text = "大眼睛又大肚子") %>%
+ hc_add_series_labels_values(temp$carb, temp$total,
+ colors = substr(sample(terrain.colors(70),6),0,7), type = "column",
+ name = "carb", colorByPoint = TRUE, center = c('20%', '20%'),
+ size = 100, dataLabels = list(enabled = T)) %>%
+ hc_tooltip(pointFormat = "{point.y}%") 進階3D直方圖
- hc_xAxis(categories =temp$月份)
- hc_xAxis(categories = x軸分類依據)
- hc_yAxis(title = list(text = “count”),min=400, max = 990)
- hc_yAxis(title = list(text = “Y軸名稱”,min=起始值,min=最大值))
- hc_chart(type = “column”,options3d = list(enabled = TRUE, beta = 整體左右旋轉度, alpha = 整體上下旋轉度))
- hc_chart(type = “圖形種類”,options3d = list(enabled = TRUE, beta = , alpha = 15))
- hc_tooltip(crosshairs = TRUE, backgroundColor = “#FCFFC5”,shared = TRUE, borderWidth = 5)
- hc_legend(align = “center”, verticalAlign = “”,layout = “vertical”, x = 0, y = 100)
> ## 這邊我們自己建一個dataframe做為示範
> temp = data.frame(月份=1:12,多益分數2015=c(450,600,650,655,400,700,750,770,800,810,800,830))
> temp1 = data.frame(月份=1:12,多益分數2016=c(480,590,700,700,430,780,720,780,810,800,860,880))
> ##
> highchart() %>%
+ hc_title(text = "小0敲可愛") %>%
+ hc_xAxis(categories =temp$月份) %>%
+ hc_add_series(name = "多益分數2015", data = temp$多益分數,color = 'orange') %>%
+ hc_add_series(name = "多益分數2016", data = temp1$多益分數2016,color = 'green') %>%
+ hc_chart(type = "column",
+ options3d = list(enabled = TRUE, beta = 15, alpha = 15)) %>%
+ hc_tooltip(crosshairs = TRUE, backgroundColor = "#FCFFC5",
+ shared = TRUE, borderWidth = 5) %>%
+ hc_legend(align = "center", verticalAlign = "",
+ layout = "vertical", x = 0, y = 100) %>%
+ hc_yAxis(title = list(text = "count"),min=400, max = 990) 散佈圖
- hc_add_series_scatter(data\(wt, data\)mpg)
- hc_add_series_scatter(x軸對應變數向量, y軸對應變數向量)
> highchart() %>%
+ hc_title(text = "Scatter chart with color") %>%
+ hc_add_series_scatter(mtcars$wt, mtcars$mpg,
+ # 以某變數作為類別訂定顏色
+ color = mtcars$hp)
> highchart() %>%
+ hc_title(text = "Scatter chart with size and color") %>%
+ hc_add_series_scatter(mtcars$wt, mtcars$mpg,
+ mtcars$drat, mtcars$hp)折線圖
- 一張圖中要放多條折線圖只需要重複增加hc_add_series(…)就可以了
> ## 珍貴的體重資料？！
> data = data.frame(年度=2005:2012,立筠體重=c(58,60,65,59,66,55,70,71),小0體重=c(50,51,53,55,49,55,60,65),屁宜體重=c(70,71,69,68,72,73,66,80))
> ##
> highchart() %>%
+ hc_title(text = "歷年小0vs立筠體重分布圖") %>%
+ hc_xAxis(categories = data$年度) %>%
+ hc_add_series(name = "立筠體重", data =data$立筠體重) %>%
+ hc_add_series(name = "小0體重", data = data$小0體重,color="red") %>% #顏色color
+ hc_add_series(name = "屁宜體重", data = data$屁宜體重,color="gold") 圓餅圖vs直方圖
- 各種不同圖形的混合在highchart底下是很方便的，只需要加上該圖形的函數就可以順利加上
> data = mtcars
> data %>% group_by(carb) %>% summarise(total=100*round(length(vs)/32,3)) -> temp2
> ## 這邊我們自己建一個dataframe做為示範
> temp = data.frame(月份=1:12,多益分數2015=c(450,600,650,655,400,700,750,770,800,810,800,830))
> temp1 = data.frame(月份=1:12,多益分數2016=c(480,590,700,700,430,780,720,780,810,800,860,880))
> ##
> highchart() %>%
+ hc_title(text = "小0敲可愛") %>%
+ hc_xAxis(categories =temp$月份) %>%
+ hc_add_series(name = "多益分數2015", data = temp$多益分數,color = 'orange') %>%
+ hc_add_series(name = "多益分數2016", data = temp1$多益分數2016,color = 'green') %>%
+ hc_chart(type = "column",
+ options3d = list(enabled = TRUE, beta = 15, alpha = 15)) %>%
+ hc_tooltip(crosshairs = TRUE, backgroundColor = "#FCFFC5",
+ shared = TRUE, borderWidth = 5) %>%
+ hc_legend(align = "center", verticalAlign = "",
+ layout = "vertical", x = 0, y = 100) %>%
+ hc_yAxis(title = list(text = "count"),min=400, max = 990) %>%
+ hc_add_series_labels_values(temp2$carb, temp2$total,
+ ### 以上只是複製上面的例子接下來只要加上一條指令，就可以順利裝上
+ colors = substr(terrain.colors(15)[4:9],1,7),type = "pie",
+ name = "carb", colorByPoint = TRUE, center = c('20%', '20%'),
+ size = 200, dataLabels = list(enabled = T)) %>%
+ hc_tooltip(pointFormat = "{point.y}%")模板區
- Highchart提供了很多種模板，以下列入一些基本款，只需將指令加在圖的後面即可
- hc_add_theme(hc_theme_darkunica())
- hc_add_theme(hc_theme_gridlight())
- hc_add_theme(hc_theme_sandsignika())
- hc_add_theme(hc_theme_538())
- hc_add_theme(hc_theme_chalk())
- hc_add_theme(hc_theme_handdrawn())
- hc_add_theme(hc_theme_null())
- hc_add_theme(thm)
- hc_add_theme(hc_theme_handdrawn())
- hc_add_theme(hc_theme_chalk())
- …………….
- 如果各位嫌不夠…請在console中貼上hc_add_theme(hc_theme_… 然後按下tab….
Bonus
- 這個部分我將剩下可以我自己常用且通用的指令都一次集中在一張圖上就示範