Highcharts是一個用純JavaScript編寫的一個圖表庫徘公， 能夠很簡單便捷的在Web網(wǎng)站或是Web應(yīng)用程序添 加有交互性的圖表番刊，并且免費提供給個人學(xué)習(xí)淑履、個人網(wǎng)站和非商業(yè)用途使用。highcharter包是R語言中繪制Highcharts圖表的包糕伐，本期介紹在R語言如何對使用highcharter包繪制的圖表進行圖表優(yōu)化忍啸。Highcharts詳情：www.hcharts.cn
本期將介紹如何對highcharter包繪制的圖表進行常見的設(shè)置和優(yōu)化,接下來全文中用到的數(shù)據(jù)集都是ggplot2中的mpg數(shù)據(jù)集仰坦，請自行導(dǎo)入數(shù)據(jù)集。另外计雌，也請導(dǎo)入本文的主角highcharter包悄晃。
坐標(biāo)軸
坐標(biāo)軸的值
利用highcharter包繪圖時，基本不需要進行額外的坐標(biāo)軸調(diào)整，因為其本身內(nèi)置的機制就存在相應(yīng)的優(yōu)化妈橄，最終輸出的圖表坐標(biāo)軸的值一般都會比較合適庶近。不過實際需求千變?nèi)f化，仍會存在需要修改的時候眷蚓，一般通過hc_yAxis 和hc_xAxis中設(shè)置參數(shù)tickPositions 或labels中的step的值進行坐標(biāo)軸值的調(diào)整,同時通過設(shè)置labels中的format調(diào)整坐標(biāo)軸值的格式
在進行調(diào)整之前鼻种，我們先看看不進行設(shè)置的是什么樣的∩橙龋基本上坐標(biāo)軸的值不用怎么調(diào)整叉钥，主要是為了對比接下來的參數(shù)設(shè)置帶來的差異。
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy"))
設(shè)置參數(shù)tickPositions篙贸，直接指定坐標(biāo)軸上的值投队。
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy")) %>% hc_yAxis(tickPositions = c(0,15,30,45,60)) %>% hc_xAxis(tickPositions = c(0,2,4,6,8))
設(shè)置參數(shù)labels中的step，通過調(diào)整值的步長歉秫，調(diào)整坐標(biāo)軸的值蛾洛。
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy")) %>%
hc_yAxis(labels = list(step = 2)) %>% hc_xAxis(labels = list(step = 2))
設(shè)置參數(shù)labels中的format养铸，指定坐標(biāo)軸的值顯示的格式雁芙。mpg數(shù)據(jù)集中的字段cyl表示氣缸數(shù)量，我們作圖展示不同氣缸數(shù)在數(shù)據(jù)集中的行數(shù)钞螟，然后對橫坐標(biāo)進行設(shè)置顯示成比如4缸.
#準(zhǔn)備數(shù)據(jù)
library(data.table)library(dplyr)library(plyr)
mpg <- data.table(mpg)cyl_num <- mpg[,.N,by = cyl][order(cyl)] %>% mutate(.,cyl = factor(cyl))
#設(shè)置橫坐標(biāo)軸的值格式
hchart(cyl_num, "column", hcaes(x = "cyl", y = "N")) %>% hc_xAxis(labels = list(format = '{value} 缸' ))
坐標(biāo)軸的標(biāo)題
坐標(biāo)軸的標(biāo)題通過設(shè)置hc_yAxis和``hc_xAxis中的參數(shù)title`進行設(shè)置兔甘。
#坐標(biāo)軸標(biāo)題
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy")) %>% hc_yAxis(title = list(text = "每加侖英里數(shù)")) %>% hc_xAxis(title = list(text = "發(fā)動機排量"))
參考標(biāo)識
參考標(biāo)識_參考線
對圖表進行參考線設(shè)置，同樣是在hc_yAxis和hc_xAxis中實現(xiàn)鳞滨，對參數(shù)plotLines中的系列值進行設(shè)置洞焙，來調(diào)整參考線的一系列設(shè)定，這些需要設(shè)置的值主要為：
label:參考線名稱
dashStyle:線的類型（solid【實線】拯啦、Dash【虛線】澡匪、shortDash【短虛線】、shotDot【點線】等）
value:在坐標(biāo)軸上顯示的位置
width:標(biāo)示線的寬度
color:標(biāo)示線的顏色
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy")) %>% hc_xAxis(plotLines = list( list( label = list(text = "參考線"), dashStyle = "solid", value = 5, width = 2, color = "red")))
參考標(biāo)識_參考區(qū)域
在hc_yAxis和hc_xAxis中對參數(shù)plotBands的系列值進行設(shè)置褒链，即可實現(xiàn)參考區(qū)域的設(shè)置唁情，這些值主要為：
label:參考區(qū)域設(shè)置文字
from:參考區(qū)域開始值
to:參考區(qū)域結(jié)束值
color: 參考區(qū)域的背景顏色
hchart(mpg, "scatter", hcaes(x = "displ", y = "hwy")) %>% hc_yAxis(plotBands = list(list( from = 20, to = 30, color = "rgba(119, 119, 119, 0.2)", label = list(text = "參考區(qū)域"))))
參考標(biāo)識_點標(biāo)識
有時，我們需要特殊標(biāo)明某個點的值或者對某個點的情況進行特殊的說明甫匹，則需要對該點進行標(biāo)識甸鸟，hc_annotations可實現(xiàn)相應(yīng)的功能，具體的設(shè)置情況和參數(shù)說明見代碼兵迅，在highcharter中進行該設(shè)置相對比較復(fù)雜抢韭，參數(shù)較多，需要多熟悉和多調(diào)整恍箭。
highchart() %>% hc_xAxis(categories = citytemp$month) %>%
hc_add_series(name = "Tokyo", data = citytemp$tokyo) %>%
hc_annotations(
list(
#標(biāo)記框設(shè)置
labelOptions = list(
#背景顏色
backgroundColor = "rgba(255,255,255,0.5)",
#標(biāo)記框位置調(diào)整
verticalAlign = "top",
y = 15,x=20 ),
labels = list(
list(
#被標(biāo)記的數(shù)點
point = list( x = 2,
y = 9.5,
xAxis = 0,
yAxis = 0 ),
text = "point one" ), list(
point = list(
x = 5,
y = 21.5,
xAxis = 0,
yAxis = 0 ),
text = "point two" ) ) ) )
圖表標(biāo)題
圖表標(biāo)題通過hc_title進行設(shè)置刻恭，如果圖表需要子標(biāo)題，則通過hc_subtitle扯夭。其中的主要參數(shù)如下：
text:標(biāo)題文字
align:標(biāo)題位置（left吠各、center臀突、right）
style:標(biāo)題格式（color【標(biāo)題顏色】,fontSize 【文字大小】）
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>%
hc_title(text= "這是圖表標(biāo)題", align='center',style = list(color="#AB36BC",fontSize = "30px")) %>%
hc_subtitle(text= "這是副標(biāo)題", align='center')
圖表圖例
圖例設(shè)置包：enabled（是否顯示圖例） title(圖例標(biāo)題) 圖例位置（align） floating（是否浮動：圖例是否在圖內(nèi)） layout（垂直[vertical]或水平[horizontal]擺放） x;y（圖例的相對位置）
這些設(shè)置均在hc_legend中進行，通過調(diào)整參數(shù)的值贾漏，得到合理的圖例布局候学。
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>%
hc_legend(
#圖例標(biāo)題
title = list(text = "圖例"),
#圖例是否顯示
enabled = TRUE,
#圖例布局位置
align = "right",
verticalAlign = "top",
#是否浮動：圖例是否在圖內(nèi)
floating = TRUE,
#垂直或水平擺放
layout = "vertical",
#圖例的相對位置
x = -100, y = 50)
圖表顏色
大多數(shù)情況下，默認(rèn)顏色都不太合適纵散，需要我們自己進行設(shè)置調(diào)整梳码，在highcharter中進行顏色是通過 colors 來指定的，colors 是個顏色值向量伍掀，默認(rèn)是：colors = c'#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1')掰茶，一共10個默認(rèn)顏色，我們可以修改顏色值或增加顏色個數(shù)來自定義圖表數(shù)據(jù)列顏色蜜笤，當(dāng)所需顏色的數(shù)量超過colors的長度時濒蒋，則會從頭調(diào)用。
hchart(class_num, "column", hcaes(x = "class", y = "N")) %>%
hc_plotOptions(column = list( colorByPoint = TRUE, colors = c('#058DC7', '#50B432', '#ED561B', '#DDDF00','#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4')))
圖表主題
highcharter包提供了多個主題把兔，可以根據(jù)實際需求和個人喜好進行選擇使用沪伙，極大的減少對圖表設(shè)置所花的時間，同時也能夠讓我們作出風(fēng)格獨特的可視化作品县好。hc_add_theme是進行主題設(shè)置的函數(shù)围橡，其包括了一些知名媒體或公司的圖表風(fēng)格：
FiveThirtyEight : hc_theme_flat()
經(jīng)濟學(xué)人：hc_theme_economist()
金融時報：hc_theme_ft()
Google ：hc_theme_google()
Firefox ：hc_theme_ffx()
FiveThirtyEight
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>% hc_add_theme(hc_theme_538())
經(jīng)濟學(xué)人
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>% hc_add_theme(hc_theme_economist())
金融時報
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>% hc_add_theme(hc_theme_ft())
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>% hc_add_theme(hc_theme_google())
Firefox
hchart(mpg,"scatter", hcaes(x = "displ", y = "hwy",group = "class")) %>% hc_add_theme(hc_theme_ffx())
更多的圖表主題可以參考http://jkunst.com/highcharter/themes.html
以上是本期介紹在R語言如何對使用highcharter包繪制的圖表進行優(yōu)化，后續(xù)將會介紹highcharter包中如何進行高級圖表繪制缕贡！
