使用 R 和 googleVis 在树形图中自定义工具提示

Question

当用户将鼠标悬停在树状图中的正方形上时，我需要显示自定义工具提示，并且我使用this 文章作为基础。

必须使用 R 和 googleVis 库使用 gvisTreeMap() 函数构建树形图。根据上面提到的文章，我在函数的选项列表中创建了一个参数generateTooltip，并为其分配了一个用于创建匿名函数的代码。这是gvisTreeMap() 调用的完整代码：

plot(gvisTreeMap(Data,
    idvar="Name.of.the.Company",
    parentvar="Name.of.the.Parent",
    sizevar="Loan.Size..INR.in.million.",
    options=list(width='*', 
        height=600, 
        minColorValue=0, 
        maxColorValue=0, 
        generateTooltip = "function(row, size, value) { 
                              return '<div style=\"background:#fd9; padding:10px; border-style:solid\">' + 'Some text' + '</div>'; 
                           }"
)))

在我的 HTML 页面中生成的 JS 代码如下所示：

// jsDrawChart
...
var options = {};
options["height"] = 600;
options["minColorValue"] = 0;
options["maxColorValue"] = 0;
options["generateTooltip"] = "function(row, size, value) { return '<div style=\"background:#fd9; padding:10px; border-style:solid\">' + 'Some text' + '</div>'; }";

这里options["generateTooltip"] 是用一个导致错误的字符串初始化的（虽然我希望该字符串会被自动识别为函数定义）。那么，我想知道有没有办法将函数定义从 R 环境传递到 generateTooltip 属性？

Answer 1

我知道这是一年多前的帖子。但是当我今天处理完全相同的问题时，我在其他任何地方都找不到具体的解决方案，所以我想我会分享我的解决方案，希望将来有人会发现这很有用。

我实际上使用了您的帖子 Mstislav 作为起点，但我在尝试在选项列表中分配 JavaScript 函数时遇到了同样的问题。经过几次不成功的删除引号的尝试（我可以用 as.symbol() 和 unquote() 删除引号，但是将结果传递给 gvisTreeMap 后得到错误消息），我意识到问题的症结所在是 Google Charts documentation 假设您直接在 JavaScript 中编写代码，而您实际上是在将参数输入 R 函数，然后将它们转换为 JavaScript。

由于似乎没有简单的方法将 JavaScript 函数传递给 gvisTreeMap 函数调用，我想我会尝试确定 googleVis 源代码中的哪个选项列表被翻译成 JavaScript，然后直接根据修改 Javascript到文章。

下载googleVissource code并从gvisTreeMap函数（在gvisTreeMap.R中）回溯后，我在gvis.R中找到了我需要修改的代码sn-p：

jsDrawChart <- '
// jsDrawChart

// ** begin modified portion **//
function showFullTooltip(row, size, value) {
return \'<div style="background:#fd9; padding:10px; border-style:solid">\' +
\'Group: \' + row + \'<br>\' +
\'Headcount: \' + size + \'<br>\' +
\'Turnover Rate: \' + value + \' </div>\';
}
// ** end modified portion **//

function drawChart%s() {
var data = gvisData%s();
var options = {};
%s
// ** begin modified portion **//
options["generateTooltip"] = showFullTooltip;
// ** end modified portion **//
%s
%s
%s
}
%s  
'
jsDrawChart <- sprintf(jsDrawChart, chartid,  chartid,
                       paste(gvisOptions(options), collapse="\n"),
                       jsFormats,
                       gvisNewChart(chartid,type,options),
                       gvisListener(chartid, type, options),
                       gvisEditor(chartid,type,options)
)

我修改了两个部分（包装在 //** 开始/结束修改部分 **// 中）。第一部分定义 showFullTooltip 函数，第二部分将 generateTooltip 选项添加到选项列表中。这对我来说就像一个魅力。 Google Charts 文章在描述如何修改 JavaScript 代码方面非常有帮助。诀窍是简单地找出在 googleVis 程序中找到该段代码的位置。

要运行此代码，我发现您不必“覆盖” googleVis 包。您只需将修改后的 gvis.R 和未修改的 gvisTreeMap.R 的副本保存在您的项目文件夹（或您可以访问的任何地方）中。然后，在您的程序顶部，加载 googleVis 库（这样您就拥有所有依赖项），然后获取您的 gvis.R 和 gvisTreeMap.R 版本（按此顺序）。修改后的 googleVis 函数版本将覆盖您从 googleVis 库加载的版本。

Answer 2

我遇到了同样的问题，xxk 的回答让我成功了，除了在我的情况下，我想结合两个默认工具提示（只有矩形的名称 - 非常有用，包括您在图中有一些小区域），以及来自showFullTooltip 的额外细节（即价值和大小）。为此，您需要（很大程度上）遵循xxk 建议的相同步骤，即，

• 下载googleVis source code
• 在合理的地方提取和保存 gvis.R 和 gvisTreeMap.R
• 仅编辑gvis.R(1)，并保存
• 加载您可能需要的任何其他 R 包，包括 googleVis (2)
• 然后才将您的自定义 gvis.R 和 gvisTreeMap.R 采购到您的主脚本中（按此顺序）。

---

现在，与上面的方法有一些偏差，我在括号之间做了标记：

(1) 在gvis.R 中，由于一些范围界定问题，您需要小心放置函数showFullTooltip 的位置。更好的地方是在gvisNewChart 的声明中。编辑后，它将如下所示。另请注意，xxk 的解决方案中的 row 已替换为 data.getValue(row, 0)，也就是矩形的标签：

gvisNewChart <- function(chartid,type,options){

  ret <- ""
  if(is.null(options$gvis$gvis.editor)){
    jsnewchart <- "
    var chart = new google.visualization.%s(
    document.getElementById(\'%s\')
    );

    // ** begin modified portion **//
    function showFullTooltip(row, size, value) {
    return \'<div style=\"background:#fd9; padding:10px; border-style:solid\">\' +
    \'Name: \' + data.getValue(row, 0) + \'<br>\' +
    \'Average: \' + size + \'<br>\' +
    \'Normalised: \' + value + \' </div>\';
    }
    // ** end modified portion **//

    chart.draw(data,options);"
    ret <- sprintf(jsnewchart,type,chartid)  

  } else {
    jsnewchart <- "
    chart%s = new google.visualization.ChartWrapper({
    dataTable: data,       
    chartType: '%s',
    containerId: '%s',
    options: options
    });
    chart%s.draw();
    "
    ret <- sprintf(jsnewchart,chartid,type,chartid,chartid)
  }
  ret
  } 

(2)我还需要在我的主 R 脚本中加载 library(jsonlite) 才能使所有这些工作。

---

还有一件事。在对gvisTreeMap() 的 R 调用中，您不需要做任何特别的事情。工具提示现在将以“默认情况下”的预期方式运行。例如，现在：

gvisTreeMap( nested_data, idvar = "Child", parentvar = "Parent",
             sizevar = "Value", colorvar = "Value",
             options = list(
               minColorValue = 0, 
               maxColorValue = 100,
               minColor = 'green',
               midColor = '#fff',
               maxColor = 'red',
               showScale = TRUE,
               maxDepth = 2,
               width = "100%", height = 800             
             )

应该只自己生成详细的工具提示，而不指定此行为。

我很幸运，身边有很棒的人来帮助我解决这个问题，因为我无法管理自己。所以感谢@DavidFarrell 和@RossAnderson。