Echarts4r：在工具提示中使用占总面积的百分比创建堆叠面积图

我需要使用

echarts4r

制作堆叠面积图。尽管有很多关于面积图的例子，但我找不到如何用R来叠加面积图的解决方案

理想情况下，还需要在图表中添加工具提示，其中包含占总数的百分比，如我使用

highcharter

package的示例所示

library(echarts4r)
library(highcharter)

set.seed(2018)
dt <- data.frame(a =1:10,
                 x = rnorm(10, mean = 20, sd = 5), 
                 y = rnorm(10, mean = 20, sd = 5),
                 z = rnorm(10, mean = 10, sd = 5))


echarts <- dt %>%
  e_charts(a) %>%
  e_area(x, stack = "stack", origin = 'start') %>%
  e_area(y, stack = "stack", origin = 'start') %>%
  e_area(z, stack = "stack", origin = 'start') %>%
  e_grid(left = '4%', right = '3%', bottom = '10%', containLabel = true) %>%
  e_tooltip(trigger = "axis", axisPointer = list(type = 'cross')) %>%
  e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
  e_toolbox_feature("saveAsImage", title = 'save as image') %>%
  e_toolbox_feature("dataZoom", title = list(zoom = "zoom", back = "back")) %>%
  e_toolbox_feature("restore", title = 'restore') %>%
  e_theme("infographic") %>%
  e_legend(type = 'scroll', bottom = 1)

echarts

highchart <-  highchart() %>%
  hc_xAxis(categories = dt$a) %>%
  hc_add_series(data = dt$x, name = 'x') %>%
  hc_add_series(data = dt$y, name = 'y') %>%
  hc_add_series(data = dt$z, name = 'z') %>%
  hc_chart(type = "area") %>%
  hc_plotOptions(area = list(stacking = "normal", lineColor = "#ffffff",
                             lineWidth = 1, marker = list( lineWidth = 1,
                                                           lineColor = "#ffffff"))) %>%
  hc_legend(reversed = FALSE) %>%
  hc_tooltip(crosshairs = TRUE, backgroundColor = "#FCFFC5", shared = TRUE, borderWidth = 5, 
             pointFormat = "<span style=\"color:{series.color}\">{series.name}</span>:
                 <b>{point.percentage:.1f}%</b> ({point.y:,.0f} users)<br/>") 

highchart

库（echarts4r）
图书馆（高级特许）
种子集（2018）
dt%
e_区域（x，stack=“stack”，origin='start'）%>%
e_区域（y，stack=“stack”，origin='start'）%>%
e_区域（z，stack=“stack”，origin='start'）%>%
e_网格（左='4%'，右='3%'，下='10%'，containLabel=true）%>%
e_工具提示（trigger=“axis”，axisPointer=list（type='cross'））%>%
e_工具箱（左=‘右’，itemSize=15，顶部=22）%>%
e_工具箱_功能（“保存图像”，标题=‘另存为图像’）%>%
e_工具箱功能（“数据缩放”，标题=列表（zoom=“zoom”，back=“back”））%>%
e_工具箱功能（“还原”，标题=“还原”）%>%
e_主题（“信息图”）%>%
e_图例（类型=‘滚动’，底部=1）
埃查特
高位图表%
hc_xAxis（类别=dt$a）%>%
hc_添加_系列（数据=dt$x，名称='x'）%>%
hc_添加_系列（数据=dt$y，名称='y'）%>%
hc_添加_系列（数据=dt$z，名称='z'）%>%
hc_图表（type=“area”）%>%
hc#U绘图选项（面积=列表（堆叠=“正常”，线条颜色=“#ffffff”，
线宽=1，标记=列表（线宽=1，
lineColor=“#ffffff”）））%%>%
hc_图例（反向=假）%>%
hc#U工具提示（十字光标=TRUE，背景色=“#FCFFC5”，共享=TRUE，边框宽度=5，
pointFormat=“{series.name}:
{point.percentage:.1f}%（{point.y:，.0f}用户）
）
海图

一种方法，非常类似于

highcharter

：

dt %>%
    e_charts(a) %>%
    e_area(x, stack = "stack", origin = 'start') %>%
    e_area(y, stack = "stack", origin = 'start') %>%
    e_area(z, stack = "stack", origin = 'start') %>%
    e_grid(left = '4%', right = '3%', bottom = '10%', containLabel = TRUE) %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("dataZoom", title = list(zoom = "zoom", back = "back")) %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(type = 'scroll', bottom = 1) %>%
    e_tooltip( trigger ="axis",
              formatter = htmlwidgets::JS("
              function(params){
                var tot = params[0].name + params[1].value[0] + params[2].value[0]
                function perc(x){return(Math.round((x/tot) * 100))};
                return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                          }
              ")
              )

dt%>%
欧洲统计图（a）%>%
e_区域（x，stack=“stack”，origin='start'）%>%
e_区域（y，stack=“stack”，origin='start'）%>%
e_区域（z，stack=“stack”，origin='start'）%>%
e_网格（左='4%'，右='3%'，下='10%'，containLabel=TRUE）%>%
e_工具箱（左=‘右’，itemSize=15，顶部=22）%>%
e_工具箱_功能（“保存图像”，标题=‘另存为图像’）%>%
e_工具箱功能（“数据缩放”，标题=列表（zoom=“zoom”，back=“back”））%>%
e_工具箱功能（“还原”，标题=“还原”）%>%
e_主题（“信息图”）%>%
e_图例（类型='滚动'，底部=1）%>%
e_工具提示（trigger=“axis”，
格式化程序=htmlwidgets:：JS（“
函数（参数）{
var tot=params[0]。名称+参数[1]。值[0]+params[2]。值[0]
函数perc（x）{return（Math.round（（x/tot）*100））；
返回（'x:'+params[0]。值[1]+'（'+perc（params[0]。值[1]）+'%）'+'
'+'y:'+params[1]。值[1]+'（'+perc（params[1]。值[1]）+'%'+'
'+'z:'+params[2]。值[1]+'（'+perc（params[2]。值[1+']））
}
")
)

有关工具提示的详细信息

编辑谢谢你的评论，很抱歉我遗漏了部分问题。出于某种原因，一个我不知道的原因，堆叠只适用于分类x轴。以下是两个到达目的地的选项：

# options one use character or vector.
dt %>% 
    dplyr::mutate(a = as.character(a)) %>% 
    e_charts(a) %>%
    e_area(x, stack = "stack") %>%
    e_area(y, stack = "stack") %>%
    e_area(z, stack = "stack") %>%
    e_grid(left = '4%', right = '3%', bottom = '10%') %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(bottom = 1) %>%
    e_tooltip( trigger ="axis",
               formatter = htmlwidgets::JS("
                                           function(params){
                                           var tot = params[0].name + params[1].value[0] + params[2].value[0]
                                           function perc(x){return(Math.round((x/tot) * 100))};
                                           return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                           }
                                           ")
               ) 

# option 2
# Use e_x_axis to change the axis type
dt %>% 
    e_charts(a) %>%
    e_area(x, stack = "stack") %>%
    e_area(y, stack = "stack") %>%
    e_area(z, stack = "stack") %>%
    e_grid(left = '4%', right = '3%', bottom = '10%') %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(bottom = 1) %>%
    e_tooltip( trigger ="axis",
               formatter = htmlwidgets::JS("
                                           function(params){
                                           var tot = params[0].name + params[1].value[0] + params[2].value[0]
                                           function perc(x){return(Math.round((x/tot) * 100))};
                                           return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                           }
                                           ")
               ) %>%
  e_x_axis(type = "category")

#选项一使用字符或向量。
dt%>%
dplyr:：mutate（a=as.character（a））%>%
欧洲统计图（a）%>%
e_面积（x，stack=“stack”）%%>%
e_面积（y，stack=“stack”）%%>%
e_面积（z，stack=“stack”）%%>%
电子表格（左='4%'，右='3%'，下='10%'）%>%
e_工具箱（左=‘右’，itemSize=15，顶部=22）%>%
e_工具箱_功能（“保存图像”，标题=‘另存为图像’）%>%
e_工具箱功能（“还原”，标题=“还原”）%>%
e_主题（“信息图”）%>%
e_图例（底部=1）%>%
e_工具提示（trigger=“axis”，
格式化程序=htmlwidgets:：JS（“
函数（参数）{
var tot=params[0]。名称+参数[1]。值[0]+params[2]。值[0]
函数perc（x）{return（Math.round（（x/tot）*100））；
返回（'x:'+params[0]。值[1]+'（'+perc（params[0]。值[1]）+'%）'+'
'+'y:'+params[1]。值[1]+'（'+perc（params[1]。值[1]）+'%'+'
'+'z:'+params[2]。值[1]+'（'+perc（params[2]。值[1+']））
}
")
) 
#选择2
#使用e_x_轴更改轴类型
dt%>%
欧洲统计图（a）%>%
e_面积（x，stack=“stack”）%%>%
e_面积（y，stack=“stack”）%%>%
e_面积（z，stack=“stack”）%%>%
电子表格（左='4%'，右='3%'，下='10%'）%>%
e_工具箱（左=‘右’，itemSize=15，顶部=22）%>%
e_工具箱_功能（“保存图像”，标题=‘另存为图像’）%>%
e_工具箱功能（“还原”，标题=“还原”）%>%
e_主题（“信息图”）%>%
e_图例（底部=1）%>%
e_工具提示（trigger=“axis”，
格式化程序=htmlwidgets:：JS（“
函数（参数）{
var tot=params[0]。名称+参数[1]。值[0]+params[2]。值[0]
函数perc（x）{return（Math.round（（x/tot）*100））；
返回（'x:'+params[0]。值[1]+'（'+perc（params[0]。值[1]）+'%）'+'
'+'y:'+params[1]。值[1]+'（'+perc（params[1]。值[1]）+'%'+'
'+'z:'+params[2]。值[1]+'（'+perc（params[2]。值[1+']））
}
")
) %>%
e_x_轴（type=“category”）

感谢您对工具提示的帮助。我的主要问题不是工具提示，而是图层。我希望每一层都覆盖在另一层之上。但在我的情况下，每一层都开始