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