Echarts4r:使用focus=“series”时,向堆叠条形图的工具提示添加额外变量

idfiyjo8  于 2022-12-20  发布在  Echarts
关注(0)|答案(1)|浏览(283)

拜托,我需要帮助!我被工具提示卡住了。我想在工具提示中显示的值旁边添加一个额外的变量,但我不知道该怎么做。问题是我想使用“emphasis = list(focus =“series”)”来关注列中某个颜色段的值和百分比。
这是一个例子:

dt <- data.frame(zipcode =as.factor(1:3),
                 cat_a = c(1711, 1116, 1215),
                 cat_b = c(276, 1447, 1227),
                 cat_c = c(893, 794, 536),
                 percent_a = c(42.3, 27.6, 30.1),
                 percent_b = c(9.4, 49.1, 41.6),
                 percent_c = c(40.2, 35.7, 24.1),
                 total_abc= c(2880, 3357, 2978))

dt |> 
  mutate(model = paste(zipcode, cat_a, cat_b, cat_c, percent_a,
                       percent_b, percent_c, total_abc, sep = ",")) |>
  e_charts(zipcode) |> 
  e_bar(cat_a, stack = "st", name="cat_a", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |> 
  e_bar(cat_b, stack = "st", name="cat_b", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |> 
  e_bar(cat_c, stack = "st", name="cat_c", y_index = 0,legend=TRUE, emphasis = 
  list(focus = "series")) |>
  e_title("Count by ZIP Code") |>
  e_x_axis(nameLocation= "middle", nameGap=25) |>
  e_axis_labels(x = "ZIP Codes", y="count") |>
  e_legend(bottom = 0, 
           selected = list('cat_a' = TRUE, 
                           'cat_b' = TRUE,
                           'cat_c' = TRUE)) |> 
  e_tooltip(trigger="item",
            textStyle=list(fontFamily="arial", fontSize=12)) |>
  e_animation(duration=2000)

我尝试使用绑定到每个e_bar和“函数参数”来添加百分比(percent_a,percent_B,percent_c)但它不起作用。我可以使用trigger=“axis”,bind和函数参数,但当我只选择一个系列时,工具提示显示所有3个系列的百分比,这是我不想要的。我只想在列中显示颜色段的值和百分比。
提前感谢任何想法:)

mfpqipee

mfpqipee1#

如果只有3个数字,您可以手动键入值。但是,我已经记录了一个动态方法,您可以在这里使用。这将查看创建图表的数据并重新计算百分比。
我不知道你到底想在工具提示中显示什么,所以我只是修改了提示以包括该百分比。
这段代码中唯一与您的问题不同的部分是e_tooltip()中的参数formatter

dt |> 
  mutate(model = paste(zipcode, cat_a, cat_b, cat_c, percent_a,
                       percent_b, percent_c, total_abc, sep = ",")) |>
  e_charts(zipcode, elementId = 'chart') |> 
  e_bar(cat_a, stack = "st", name="cat_a", y_index = 0, 
        legend=TRUE, emphasis = list(focus = "series")) |> 
  e_bar(cat_b, stack = "st", name="cat_b", y_index = 0, legend=TRUE, emphasis = 
          list(focus = "series")) |> 
  e_bar(cat_c, stack = "st", name="cat_c", y_index = 0, legend=TRUE, emphasis = 
          list(focus = "series")) |>
  e_title("Count by ZIP Code") |>
  e_x_axis(nameLocation= "middle", nameGap=25) |>
  e_axis_labels(x = "ZIP Codes", y="count") |>
  e_legend(bottom = 0, 
           selected = list('cat_a' = TRUE, 
                           'cat_b' = TRUE,
                           'cat_c' = TRUE)) |> 
  e_tooltip(trigger="item", formatter = htmlwidgets::JS(
    "function(p) {
    el = get_e_charts('chart').getOption();    /* get all data */
    tots = 0;
    ser = p.componentIndex;                    /* get current series */
    el.series[ser].data.forEach((e, i, a) => {
      tots += Number(a[i].value[1]);           /* convert to number and sum */
    });
    pt = p.value[1];                           /* get current value */
    pct = ((pt / tots) * 100).toPrecision(3);  /* calculate percentage, round */
    return(p.seriesName + ' ' + '<br><br>Value: ' + p.value[1] + 
    '<br>Percentage: ' + pct + '%');
    }"),
    textStyle=list(fontFamily="arial", fontSize=12)) |>
  e_animation(duration=2000)

相关问题