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：使用工具提示中的总计百分比创建堆积面积图

1 个答案: