Echarts4r:在工具提示中使用占总数的百分比创建堆积面积图 [英] Echarts4r : Create stacked area chart with percentage from total in tooltip

问题描述

我需要使用 echarts4r 制作堆积面积图.尽管 javascript 我找不到如何使用R堆叠面积图的解决方案.

I need to make stacked area chart using the echarts4r. In spite of great examples on javascript I can't find the solution how to make the area chart stacked using R.

理想情况下，还需要将工具提示与总数的百分比添加到图表中，就像我使用 highcharter 包的示例一样.

Ideally it is also necessary to add to the chart the tooltip with percentage from total as in my example using 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

推荐答案

一种方法，与 highcharter 非常相似:

One way of doing it, very similar to 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]) + '%)')
                                          }
              ")
              )

有关工具提示的更多信息在网站上.

More information on tooltips on the website.

编辑感谢您的评论，抱歉我遗漏了部分问题.出于某种原因，一个我不知道的原因，堆叠仅适用于分类 x 轴.以下是两种到达方式:

EDIT Thanks for your comment, sorry I omitted part of the question. For some reason, a reason I was not aware of, stacking only works with categorical x axis. Below are two options to get there:

# 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:在工具提示中使用占总数的百分比创建堆积面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！