在 echarts4r 中将总数添加到条形图工具提示

Question

我正在尝试创建一个自定义工具提示，在echarts4r ，除了显示不同堆栈的值外，还显示总数（等于条形的高度）：所以是这样的（来自chart.js：放置工具提示对于条形图顶部的堆积条形图）：

此代码只是错过了总数

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

dt %>% 
  mutate(total = x +y +z) %>%
  e_charts(a) %>%
  e_bar(x, stack = "stack") %>%
  e_bar(y, stack = "stack") %>%
  e_bar(z, stack = "stack") %>%
  e_grid(containLabel = T) %>%
  e_tooltip(trigger = "axis") 

这段代码显示的数据还算可以，但没有正确的标签，看起来不太好看（例如错过了颜色代码）

dt %>% 
  mutate(total = x +y +z) %>%
  e_charts(a) %>%
  e_bar(x, stack = "stack",  bind = total) %>%
  e_bar(y, stack = "stack",  bind = total) %>%
  e_bar(z, stack = "stack",  bind = total) %>%
  e_grid(containLabel = T) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params)
                                        {
                                            return `<strong>${params.value[0]}</strong>
                                                      <br/>    ${params.value[1]}
                                                    <br/>Total: ${params.name}`
                                        }  "))

Answer 1

调整这个答案可以这样实现：

注意：此外，我稍微增加了宽度，将数字右对齐并计算了格式化程序函数内的总数。

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

dt %>% 
  e_charts(a) %>%
  e_bar(x, stack = "stack") %>%
  e_bar(y, stack = "stack") %>%
  e_bar(z, stack = "stack") %>%
  e_grid(containLabel = T) %>%
  e_tooltip(trigger = "axis", formatter = htmlwidgets::JS('
                                                          function (params) {
            let tooltip = `<p style="width: 100px;">${params[0].axisValue}</p>`;
            let total = 0
            params.forEach(({ seriesName, marker, value }) => {
              value = value || [0, 0];
              tooltip += `<p style="width: 100px;">${marker} ${seriesName}<span style="float: right;"><strong>${value[1]}</strong></span></p>`;
              total += Number(value[1]);
            });
            
            tooltip += `<p style="width: 100px;">Total<span style="float: right;"><strong>${total}</strong></span>`;
            
            return tooltip;
          }'))