R语言：highcharter包绘制可交互的高级图表（一）
2018-08-19 本文已影响0人
数据老黄
本期介绍在
R语言如何使用highcharter包绘制可交互的高级图表，highcharter包是R语言中绘制Highcharts图表的包。Highcharts是用纯JavaScript编写的一个图表库， 能够很简单便捷的在Web网站或是Web应用程序添 加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts详情：www.hcharts.cn
如何使用highcharter包绘制可交互的高级图表将分为两期给大家介绍，本期介绍的高级图表包括：组合图、金字塔图、嵌套柱状图、柱形范围图、误差图、扇形图、环形图、玫瑰图、蛛网图。接下来，请大家安装highcharter 和data.table包并导入，我们开始详细看一下各图表的制作细节。
组合图
当需要对多个对象的变化趋势进行比较时，我们会用到组合图，即将多个图作在同一个作图框内。在highcharter中作组合图的方式有两种,均通过hc_yAxis_multiples()实现，当我们需要多个y轴时，使用该函数创建。
方式1:在hc_yAxis_multiples直接插入多个list,每个list为一个y轴,在各list中可设置y轴进行详细的设置，设置详情见代码。
highchart() %>%
hc_title(text = "组合图示例一", align="center") %>%
hc_xAxis(categories = c(10:20)) %>%
hc_yAxis_multiples(
#创建第一个y轴
list(
#控制图与上面单元间距
top = "0%",
#控制图的高度
height = "30%",
#y轴的线宽
lineWidth = 5),
#创建第二个y轴
list(
#第一个y轴的高度是30%，设置top = "32%"，两张图留出2%的间距
top = "32%",
#控制图的高度
height = "70%",
#轴与图的间距，一般设置为0
offset = 0,
#y轴的线宽
lineWidth = 5,
#是否显示轴的开始值
showFirstLabel = TRUE
#是否显示轴的结束值
,showLastLabel = FALSE)
) %>%
hc_add_series(data = round(rnorm(10),2),
#指定数据显示的坐标轴，0 为第一个坐标轴
yAxis = 0) %>%
hc_add_series(data = round(rexp(10),2), type = "spline",
#指定数据显示的坐标轴，1 为第二个坐标轴
yAxis = 1) %>%
hc_add_theme(hc_theme_538())
方式2:在hc_yAxis_multiples设置create_yaxis的参数naxis的值。
highchart() %>%
hc_title(text = "组合图示例二", align="center") %>%
hc_yAxis_multiples(
#创建坐标轴
create_yaxis(
#指定轴的个数
naxis = 3,
#指定各个轴的线宽
lineWidth = 5
)) %>%
hc_add_series(data = c(1,3,2)) %>%
hc_add_series(data = c(20, 40, 10), yAxis = 1) %>%
#在第3个坐标轴上放第一组数
hc_add_series(data = c(200, 400, 500), type = "column", yAxis = 2) %>%
#在第3个坐标轴上放第二组数
hc_add_series(data = c(500, 300, 400), type = "column", yAxis = 2) %>%
hc_add_theme(hc_theme_elementary())
金字塔图
金字塔图典型的是人口金字塔图，人口金字塔是用类似古埃及金字塔的形象描绘人口年龄和性别分布状况的图形，能表明人口现状及其发展类型。当有类似的信息需要表达时，即可用金字塔图来呈现。
金字塔图的实现借鉴堆积柱状图，将其中一个类别的数据转为负值，比如示例中的性别 '男' 的数据，这样处理后，就要求我们必须将坐标轴的轴值以及提示框的值设置为显示绝对值，详细情况如下。值得注意的是，在提示框中除了将显示的值设置为绝对值外，还将其格式进行了设置。另外，这里展示了设置左右横坐标轴的方法，如在作其他图时需要进行类似的设置，可以借鉴。
m <- c(1746181,1884428,2089758,2222362,2537431,2507081,2443179,2664537,3556505,3680231, 3143062 ,2721122, 2229181 ,2227768,
2176300, 1329968 , 836804,354784,90569,28367,3878)
f <- c(1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,3360596, 3493473, 3050775, 2759560, 2304444,
2426504, 2568938, 1785638,1447162, 1005011, 330870, 130632, 21208)
class <- c('0-4', '5-9', '10-14', '15-19','20-24', '25-29', '30-34', '35-39', '40-44','45-49', '50-54','55-59', '60-64',
'65-69', '70-74', '75-79', '80-84', '85-89', '90-94','95-99', '100 + ')
highchart() %>%
hc_xAxis(
list(
categories = class,
#颠倒坐标轴
reversed = FALSE,
labels = list(step = 1)),
list(
#调整坐标轴位置至右侧
opposite = TRUE,
categories = class,
reversed = FALSE,
#关联第一个坐标轴
linkedTo = 0,
labels = list(step = 1))
) %>%
hc_plotOptions(series = list(#图内柱子边界线宽，设置为0，取消显示边界线
borderWidth = 0))%>%
hc_yAxis(
#坐标轴显示值的格式设置，负值取绝对值
labels = list(formatter = JS("function () { return (Math.abs(this.value) / 1000000) + 'M';}")),
#设置坐标轴范围
min = -4000000,max = 4000000)%>%
hc_tooltip(#设置提示框的格式
formatter = JS("function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);}"))%>%
hc_title(text = "2015年德国人口金字塔图",align="center")%>%
hc_plotOptions(series= list(
#设置堆叠柱状图，实现金字塔形状
stacking = "normal")) %>%
hc_add_series(name = "男",
#其中一类取负值，对称显示数据
data = -m,
type = "bar") %>%
hc_add_series(name = "女",data = f,type = "bar") %>%
hc_add_theme(hc_theme_538())
嵌套柱状图
嵌套柱状图将两个柱子套在一起，展示两个值的相对大小，可用于展示比如订单量、营收等的同比周期或环比周期值的变化，表达一种“突破”的视觉效果。嵌套柱状图通过hc_plotOptions()设置grouping参数实现。
city <- c("北京市","上海市","广州市","深圳市")
Aug <- c(180,150,170,130)
Jul <- c(200,135,185,100)
highchart() %>%
hc_title(text = "各城市月度营收 ( 百万)", align="center") %>%
hc_xAxis(categories = city) %>%
hc_plotOptions(column = list(
#将两组值合并在一起,默认值是TRUE
grouping = FALSE,
#设置图的阴影,默认值是FALSE
shadow = FALSE,
#合并后柱子的边界宽度
borderWidth = 0)) %>%
hc_add_series(
#名称
name = "七月营收",
data = Jul,
type = "column",
color = "rgba(165,170,217,1)",
#合并后柱子的相对粗细，结合第二个“hc_add_series”中的该参数进行相对调整
pointPadding = 0.3,
#轴值与柱子中心线的相对位置
pointPlacement = 0) %>%
hc_add_series(
name = "八月营收",
data = Aug,
type = "column",
#设置透明度为0.9，可以稍微减少第一个柱子被遮挡的程度
color = "rgba(126,86,134,0.9)",
pointPadding = 0.4,
pointPlacement = 0) %>%
hc_add_theme(hc_theme_flat())
柱形范围图
柱形范围图用于展示范围变化的数，可直观的体现出组内范围和组间差异。柱形范围图的type值为columnrange，同时在hcaes中设置范围变化的最高值和最低值。
month <- c('一月','二月','三月','四月','五月', '六月','七月','八月','九月','十月','十一月','十二月')
low_temp <- c(-9.7,-8.7,-3.5,-1.4,0,2.9,9.2,7.3,4.4,-3.1,-5.2,-13.5)
high_temp <- c(9.4,6.5,9.4,19.9,22.6,29.5,30.7,26.5,18.0,11.4,10.4,9.8)
month_temp <- data.table(month,low_temp,high_temp)
highchart() %>%
hc_chart(
#旋转坐标轴
inverted = TRUE)%>%
hc_title(text = "每月温度变化范围( °C )", align="center")%>%
hc_xAxis(categories = month) %>%
hc_yAxis(title = list(text = "温度 ( °C )")) %>%
hc_plotOptions(columnrange = list(dataLabels = list(enabled = TRUE)))%>%
hc_legend(enabled = FALSE)%>%
hc_plotOptions(series = list(#图内柱子边界线宽，设置为0，取消显示边界线
borderWidth = 0))%>%
hc_add_series(data = month_temp[,2:3],
name = "温度",
#图表类型
type = "columnrange",
hcaes(
#最低值
low = low_temp,
#最高值
high = high_temp)) %>%
hc_add_theme(hc_theme_ffx())
误差图
误差图通过误差条体现值的不确定性范围，误差条越短标明值的分布越集中，确定性越高，一般可在条形图、折线图、散点图中使用误差条。误差条的实现通过增加type值errorbar.
dataset <- data.table(
month = c('一月','二月','三月','四月','五月', '六月','七月','八月','九月','十月','十一月','十二月'),
rain = c(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4),
low = c(48, 68, 92, 128, 140, 171, 135, 142, 204, 189, 95, 52),
high = c(51, 73, 110, 136, 150, 179, 143, 149, 220, 199, 110, 56))
highchart()%>%
hc_title(text="误差图",align="center")%>%
hc_plotOptions(series = list(#图内柱子边界线宽，设置为0，取消显示边界线
borderWidth = 0)) %>%
hc_legend(enabled = FALSE)%>%
hc_xAxis(categories = dataset$month)%>%
hc_yAxis(title = list(text= "降水"),labels = list(format = "{value} mm")) %>%
hc_add_series(name = "降水",type = "column",data = dataset$rain)%>%
hc_add_series(name = "降雨误差",type = "errorbar",data = dataset,hcaes(low = low,high = high))%>%
hc_add_theme(hc_theme_flat())
扇形图
扇形图由饼图变化而来，因此type仍为pie,通过设置startAngle 、endAngle控制扇形的角度大小，innerSize 设置扇面的大小。
explorer_rate <- data.table(name = c('Firefox','IE','Chrome','Safari','Opera','other'),
rate = c(45, 26.8, 12.8, 8.5,6.2,0.7))
highchart() %>%
hc_title(
#图表标题，“<br>” 换行
text = "浏览器<br>份额占比",
#标题位置,水平方向
align = "center",
#标题位置,垂直方向
verticalAlign = "middle",
#标题位置，基于上方位置，进行微调
y = 60) %>%
hc_plotOptions(pie = list(
dataLabels = list(
#显示标签
enabled = TRUE,
#标签显示位置调整
distance = -50,
#标签的格式设置
style = list(fontWeight = "bold",color = "white")),
#圆环的开始角度
startAngle = -90,
#圆环的结束角度
endAngle = 90,
center = c('50%','75%')))%>%
hc_tooltip(
#提示框格式显示
headerFormat = "{series.name}<br>",
pointFormat = "{point.name}: <b>{point.percentage:.1f}%</b>")%>%
hc_add_series(explorer_rate,type = "pie",hcaes(name = name, y = rate),name = "份额",
#控制环的粗细
innerSize = "50%") %>%
hc_add_theme(hc_theme_google())
环形图
环形图和扇形图一样，由饼图变化而来，环形图只需设置innerSize的参数，即可实现。
explorer_rate <- data.table(name = c('Firefox','IE','Chrome','Safari','Opera','other'),
rate = c(45, 26.8, 12.8, 8.5,6.2,0.7))
highchart() %>%
hc_title(text = "浏览器<br>份额占比",align = "center",verticalAlign = "middle",y = -10) %>%
hc_tooltip(headerFormat = "{series.name}<br>",pointFormat = "{point.name}: <b>{point.percentage:.1f}%</b>")%>%
hc_plotOptions(pie = list(dataLabels = list(enabled = TRUE,distance = -50
,style = list(fontWeight = "bold",color = "white")),
#设置图形显示的位置
center = c('50%','50%')
))%>%
hc_add_series(explorer_rate, type = "pie", hcaes(name = name, y = rate), name = "份额",
#控制环的粗细，当为 0%时，就是饼图
innerSize = "50%") %>%
hc_add_theme(hc_theme_google())
玫瑰图
玫瑰图即南丁格尔玫瑰图，是由弗罗伦斯·南丁格尔所发明的，是一种圆形的直方图,因此它是由直方图演变而来，将直方图的坐标轴设置为极坐标即可，该设置通过polar参数实现。
rose_data <- data.table(melt(citytemp,"month"))
rose_data[,rate:= round(ifelse(value>= 0,value,0)/ sum(ifelse(value>= 0,value,0))*100,2)]
highchart() %>%
#polar设置极坐标
hc_chart(polar = TRUE,type = "column") %>%
hc_title(text = "各城市数据分布",x=-50) %>%
#设置图形大小
hc_pane(size = "85%") %>%
#设置图例位置
hc_legend(align = "right",verticalAlign = "top",y = 100,layout = "vertical") %>%
hc_yAxis(title = list(text = "占比 (%)",
#设置轴标题的位置
x= 0,
y=-30),
#颠倒堆积的顺序
reversedStacks = FALSE) %>%
hc_xAxis(categories = unique(rose_data$month))%>%
hc_tooltip(
#提示框的值显示百分比
valueSuffix = "%") %>%
hc_plotOptions(series = list(stacking = "normal",pointPlacement= "on",groupPadding = 0,shadow = FALSE))%>%
hc_add_series(data=rose_data,type = "column",hcaes(y=rate,group = variable)) %>%
hc_add_theme(hc_theme_google())
蛛网图
蛛网图又名雷达图，因其呈现的外观形状而得名。可以像玫瑰图一样，理解为极坐标下的折线图，在highcharter包就是以这个思路实现的蛛网图。
type <- c("销售", "市场营销", "发展", "客户支持","信息技术","行政管理")
actual <- c(50000, 39000, 42000, 31000, 26000, 14000)
plan <- c(43000, 19000, 60000, 35000, 17000, 10000)
highchart() %>%
#polar设置极坐标
hc_chart(polar = TRUE,type = "line") %>%
hc_title(text = "预算与支出",x=-60) %>%
#设置图形大小
hc_pane(size = "80%") %>%
#设置图例位置
hc_legend(align = "right",verticalAlign = "top",y = 70,layout = "vertical") %>%
hc_xAxis(categories = type,
#横轴线宽设为0，隐藏横轴
lineWidth = 0,
#旋转图表分割线至多边形的顶点
tickmarkPlacement = "on") %>%
hc_yAxis(#设置图形为多边形
gridLineInterpolation = "polygon",
#纵轴线宽设为0，隐藏纵轴
lineWidth = 0,
min = 0) %>%
hc_tooltip(#提示框同时显示两条线的同一个类别下的值
shared = TRUE,
#提示框格式
pointFormat = '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>')%>%
hc_add_series(name = "实际支出",actual) %>%
hc_add_series(name = "预算拨款",plan) %>%
hc_add_theme(hc_theme_google())
以上是R语言中如何使用highcharter包绘制可交互的高级图表的第一部分， 接下来一期将介绍箱线图、瀑布图、漏斗图、桑基图、词云图、热力图、帕累托图、矩形树图的绘制。
