前两期干货分享系列推送中，我们介绍了Shiny的基本用法以及运用highcharter和DT插入可交互的图表的方法（）、Shiny的排版技巧（），有需要的小伙伴们可以点击查看重温一下哦。
本期推送中，我们将进一步介绍如何在highcharter中修改鼠标的点击事件，以及如何在shiny中设置点击后出现文字、图片弹窗的进阶功能。本期仍然基于之前的推送中画各省份累计确诊人数的图的例子，最终效果如下~ 快来看看具体怎么实现吧！
highcharter鼠标点击事件修改
01
在开始操作前，我们先初步介绍下，highcharter中的鼠标事件包括：鼠标点击、鼠标悬浮/移开、鼠标拖动、滚轮等等，而具体的事件操作部位又可以细分为：点、线、空白位置等等。我们可以通过各种参数的设置，控制这些事件发生所产生的交互效果。
首先，我们从简单的修改鼠标悬浮事件的提示框中的文字为例来引入。我们可以通过hc_tooltip()进行修改提示框中文字的操作。比如通过设置hc_tooltip(enabled = FALSE)可以去掉悬浮时的提示框；又如通过以下代码对提示框中的内容显示进行设置。以下例子表示提示框中显示当前变量名、保留两位小数的y轴值，并且给出交互提示线。
hc_tooltip(pointFormat = '{series.name} -- {point.y:.2f}', crosshairs = TRUE)
小本子准备好了吗？接下来让我们重点看看如何进行鼠标点击事件的修改。一般highcharter默认给出的折线图上的点没有交互式的点击事件，此时，我们需要用JS()函数插入JavaScript的代码来自定义一个点击事件。
例如：我们希望点击折线图上的点时，界面会弹出该点的信息。这样的需求可以通过如下代码进行设置，其中alert()表示弹出网页弹窗。
myClickFunction = JS("function(event) {alert('现在点击的是' + event.point.category + '的' +this.name + '！\n具体人数为：' + this.data[event.point.x].y + '。');}")
我们仔细品品上面的代码，可以注意到：在折线图的点击函数中，可以用event.point.category来获取横坐标的值，用this.data[event.point.x].y来获取纵坐标的值，用this.name来获取变量名。
接着，我们通过hc_plotOptions ()函数，将events中的click设置为上述点击函数。同时，我们还可以修改里面的其他参数来控制点和线的样式。
hc_plotOptions(series = list(lineWidth = 8, #控制线宽events = list(click = myClickFunction), #修改点击函数marker = list(enabled = TRUE, #是否显示点radius = 5, #点的大小states = list(hover = list(enabled = TRUE))) #鼠标经过点是否需要放大)))
通过以上操作得到的效果图如下：
点击事件与Shiny交互（文字）
02
前面介绍的只是一个简单的点击弹窗操作，然而在很多情况下，我们希望点击之后提示框给出更多该点相关的信息。
如：我们希望点击后显示该点省份当天的累计确诊、病死、治愈人数等等。这时，我们需要和Shiny配合，将点击事件中获取到的值传送给R，筛选需要的数据，给出更多的数值返回到UI界面。另外，我们还希望返回的这些文字是可以复制的，更方便我们获取信息。我们期待得到的效果如下：
想实现这样的功能，一方面，我们需要将点击事件获取到的信息保存下来。这里可以在自定义的点击函数中，定义变量记录点的值，如用变量click_x来获取该点的x值（event.point.category），并用Shiny.onInputChange()把这个值返回给Shiny的input，这样便可在server中调用input$ my_click来获取这个值。具体代码如下（划重点：要注意JS()中的代码每一句结尾都要有分号！）：
myClickFunction2 = JS("function(event) {var click_x = event.point.category.toString();Shiny.onInputChange('my_click', click_x);}")
另一方面，我们需要在server中监听点击事件，并做出弹窗反应。我们可以用Shiny中的showModal(modalDialog())函数，里面的设计和UI使用的函数完全相同（可视为一个子页面）。将这个函数放在server的observeEvent()中，即可以实现在网页上出现一个弹窗（注意是放在server.R中！）。具体实例代码如下：
observeEvent(input$my_click, {#获取数据prov_data = data_his[input$MyProvince]prov_data$time = as.Date(prov_data$time)prov_data = subset(prov_data, time == as.Date(input$my_click)) #获取当前点击日期的数据prov_data = prov_data %>%group_by(province,time) %>%summarise(cum_confirm = sum(cum_confirm), cum_heal = sum(cum_heal), cum_dead = sum(cum_dead))#弹窗界面设置showModal(modalDialog(fluidRow(column(12,h4(paste0(prov_data$province, prov_data$time, "累计确诊: ", prov_data$cum_confirm,", 累计治愈：", prov_data$cum_heal,"累计病死：", prov_data$cum_dead, "。")))), size = "l" , #弹框大小easyClose = TRUE, footer = modalButton("关闭提示") #弹框提示语))})
如果我们需要返回点击事件的多个数值，比如同时返回点击的x和y的值，我们可以在JS()代码中创建一个数据框返回结果：var click_data = { x: click_x, y: click_y};，在R中直接用$符号即可获取数据框中相应变量的值。
点击事件与Shiny交互（图片）
03
在对上述代码和原理进行一番了解后，我们自然而然地提出一个想法，我们是否能在showModal(modalDialog())的子页面中插入更多复杂的组件呢？例如图像等等。
接下来就让我们一起动手试试，在子页面中插入点击日期的全国累计确诊排名前10的省份的柱形图，并在文字中给出选择省份的排名。我们只需要在监听事件的处理中加入一个output的输出，并在弹窗界面中绘制就可以了~
observeEvent(input$my_click, {#获取数据并处理prov_data = data_his$dataprov_data$time = as.Date(prov_data$time)prov_data = subset(prov_data, time == as.Date(input$my_click))prov_data = prov_data %>% group_by(province,time) %>% summarise(cum_confirm = sum(cum_confirm))prov_data = arrange(prov_data, desc(cum_confirm))index = which(prov_data$province == input$MyProvince)prov_data = prov_data[2:11,]#绘制弹窗中的柱状图output$Barplot = renderHighchart({highchart() %>%hc_xAxis(categories = prov_data$province)%>%hc_add_series(name = "累计确诊人数", type = "column",data = prov_data$cum_confirm)%>%hc_add_theme(hc_theme_google())})#弹窗界面设置showModal(modalDialog(fluidRow(column(12,h4(paste0(input$my_click, "，除湖北外，", input$MyProvince,"累计确诊人数排名第",index,"名; 全国累计确诊人数为",sum(prov_data$cum_confirm),"。")),tags$br() )), highchartOutput("Barplot"), size = "l" , easyClose = TRUE, footer = modalButton("关闭提示")))})
噔噔噔噔~ 通过以上代码，我们得到的最终效果就是这样啦~
此时小伙伴们是否有这样一种感觉：不过是一个简单的小改动，却能一下子使得界面更加灵活多变。大家也可以尝试定制自己的点击函数事件以及弹窗界面噢！
本期的介绍就告一段落啦，针对于其他鼠标事件，如拖拽、滚轮等等大家也可以试试用类似的方法自定义事件噢~ 而在自定义事件时，很多时候我们需要对照Highchart原本的JavaScript代码来修改我们的R代码。这样的操作并不复杂，只需要记得JavaScript的每一个[]在R中都要给一个list，而JavaScript的:赋值在R中都用=赋值就可以啦~
更多可视化分析结果可以在由华统开发的新冠肺炎疫情分析平台中查看。平台近期更新了病例的可视化，欢迎大家前来体验！扫描下方的二维码或者点击阅读原文，即可进入平台：
大家有不明白的地方或者有更好的方法、想知道的其他技巧都可以留言噢！感谢支持~
往期精彩
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： lzxmw777
