向工具提示饼图 echarts4r 添加额外变量答案

【问题标题】：Add extra variables to tooltip pie chart echarts4r向工具提示饼图 echarts4r 添加额外变量
【发布时间】：2021-06-23 17:58:32
【问题描述】：

我正在使用echarts4r 创建一个圆环图。现在我正在尝试添加一个自定义工具提示，并且我能够复制此处给出的示例Echarts4r : Create stacked area chart with percentage from total in tooltip 和此处Displaying extra variables in tooltips echarts4r。但是，我真的不明白这如何扩展到饼图。我想要一个带有工具提示的饼图，显示总数和相对百分比

library(tidyverse)
library(echarts4r)

My_df <- data.frame(n = c(1, 4, 10), 
                    x = c("A", "B", " C")) %>%
  mutate(percent = round(n/sum(n), 2) )

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip()

这是我目前为止最好的镜头

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        return('<strong>' + params.name + 
                                        '</strong><br />total: ' + params.value + 
                                        '<br />percent: ' +  params.value[1])   }  "))

在散点图示例中，额外的值使用bind = 附加，但这不适用于饼图。

【问题讨论】：

标签： javascript r echarts

【解决方案1】：

你不能用params.percent吗？

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        return('<strong>' + params.name + 
                                        '</strong><br />total: ' + params.value + 
                                        '<br />percent: ' +  params.percent)  +'%' }  "))

您还可以使用 Javascript template literals 整理一下。

My_df %>%
  e_charts(x)  %>% 
  e_pie(n, radius = c("50%", "70%")) %>%
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params)
                                        {
                                            return `<strong>${params.name}</strong>
                                                    <br/>Total: ${params.value}
                                                    <br/>Percent: ${params.percent}%`
                                        }  "))

【讨论】：

【解决方案2】：

这可能比@WeihuangWong 在Displaying extra variables in tooltips echarts4r 中的答案更骇人听闻

如果您只想显示百分比，那么@norie 的答案就是要走的路。如果有人想在工具提示中显示尚未由 echarts 计算的值，我的回答可能仍然有用。

根据该答案，您可以在 df 中添加一个变量，其中包含系列名称和您希望在工具提示中显示的其他值，我称之为 name 以供参考
在e_charts 中使用name 而不是x
在e_tooltip 内部将name 拆分为各个部分并设置您的工具提示
但是，使用name 有一个副作用，现在名称和百分比值都显示为标签和图例中。为了摆脱这种情况，我们还必须为标签和图例添加格式化程序。

library(tidyverse)
library(echarts4r)

My_df <- data.frame(n = c(1, 4, 10), 
                    x = c("A", "B", " C")) %>%
  mutate(percent = round(n/sum(n), 2),
         name = paste(x, percent, sep = ","))

My_df %>%
  e_charts(name)  %>% 
  e_pie(n, radius = c("50%", "70%"), label = list(
    formatter = htmlwidgets::JS(
    "function(params){
      var vals = params.name.split(',')
      return(vals[0])}"))
  ) %>%
  e_legend(formatter = htmlwidgets::JS(
      "function(name){
      var vals = name.split(',')
      return(vals[0])}")) %>% 
  e_tooltip(formatter = htmlwidgets::JS("
                                        function(params){
                                        var vals = params.name.split(',')
                                        
                                        return('<strong>' + vals[0] + 
                                        '</strong><br />total: ' + params.value + 
                                        '<br />percent: ' +  vals[1])   }  "))

【讨论】：