Echarts4r：在工具提示中创建带有总计百分比的堆积面积图

Question

我需要使用 echarts4r 制作堆积面积图。尽管 javascript 上有很好的示例，但我找不到如何使用 R 制作堆叠面积图的解决方案。

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

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

Answer 1

一种方法，非常类似于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]) + '%)')
                                          }
              ")
              )

有关工具提示的更多信息 on the website。

编辑感谢您的评论，抱歉我省略了部分问题。出于某种原因，一个我不知道的原因，堆叠仅适用于分类 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")

Echarts4r：在工具提示中创建带有总计百分比的堆积面积图

Echarts4r : Create stacked area chart with percentage from total in tooltip

visualization

r

echarts