javascript - 悬停散点图时显示变量名称

Question

这是使用来自 this answer on GitHub 的 {echarts4r} 绘制的图:

library(echarts4r)
library(tibble)

mtcars %>%
  rownames_to_column("model") %>%  
  e_charts(mpg) %>%
  e_y_axis(drat) %>%
  e_scatter(drat, symbol_size = 15, bind = model, scale = NULL) %>%
  e_tooltip(formatter = htmlwidgets::JS("
              function(params){
                return('<strong>' + params.name +  
              '</strong><br />x-axis: ' + params.value[0] +  
                '<br />y-axis: ' + params.value[1]
                )} 
              "))

如您所见，将鼠标悬停在一个点上时会显示汽车型号的名称和值。但是，我不知道如何以相同的方式显示变量名。我知道我可以用它们的名称手动替换“x 轴”和“y 轴”，但我想自动执行。

我检查了 documentation of echarts关于这一点，但使用 {a}(例如)不起作用。

有什么想法吗？

编辑:我用的是echarts4r 0.3.3

Answer 1

您要求的东西不存在于为 e_tooltip 传递的参数中。您可以通过将 params 传递给 console.log 并在浏览器中检查此日志来访问它们:

mtcars %>%
  rownames_to_column("model") %>%  
  e_charts(mpg) %>%
  e_y_axis(drat) %>%
  e_scatter(drat, symbol_size = 15, bind = model, scale = NULL) %>%
  e_tooltip(formatter = htmlwidgets::JS("
              function(params){
              var obj_str = JSON.stringify(params);
              console.log(obj_str);
                return('<strong>' + params.name +  
              '</strong><br />' + params.seriesName + ': ' + params.value[0] +  
                '<br />mpg: ' + params.value[1]
                )} 
              "))

您会注意到 x 轴名称在 params.seriesName 下，但找不到 y 轴名称。

如果您要检查 console.log 中的 params，您会发现以下示例:

{"componentType":"series",
  "componentSubType":"scatter",
  "componentIndex":0,
  "seriesType":"scatter",
  "seriesIndex":0,
  "seriesId":"\u0000drat\u00000",
  "seriesName":"drat",
  "name":"Ford Pantera L",
  "dataIndex":9,
  "data":{"value":[15.8,4.22],
  "name":"Ford Pantera L"},
  "value":[15.8,4.22],
  "color":"#c23531",
  "dimensionNames":["x","y"],
  "encode":{"x":[0],"y":[1]},
  "marker":"<span style=\"display:inline-block;
            margin-right:5px;
            border-radius:10px;
            width:10px;height:10px;
            background-color:#c23531;\"></span>",
  "$vars":["seriesName","name","value"]
}

在这种情况下，下面@Edo 的paste0 方法似乎非常合理。