在echarts4r中添加totals to barchart tooltip

Question

我正在尝试创建一个自定义工具提示，它在 echarts4r 中除了显示不同堆栈的值外，还显示总数（等于栏的高度）：类似这个（来自 chart.js: Place tooltip for stacked bar charts on top of bar）：

此代码刚好漏掉总数

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;
          }'))

在echarts4r中添加totals to barchart tooltip

add totals to barchart tooltip in echarts4r

javascript

r

shiny

tooltip

echarts