rCharts rNVD3 工具提示自定义 [英] rCharts rNVD3 tooltip customisation

问题描述

我有以下问题；我在 NVD3 周围使用 rCharts 包装器来生成一个简单的折线图.我希望修改默认的提示信息行为.使用 NVD3 库，我可以使用以下代码完成此操作；

I have the following problem; I am using the rCharts wrapper around NVD3 to produce a simple line chart. I wish to modify the default tootip behavior. Using the NVD3 library I have been able to do this with the following code;

.tooltipContent(function(key,x ,y,e,graph){
    var idx = x.replace("s","")

    var thumbPath = 'snap_' + idx + '.png'
    return '<h3>' + key + '</h3>' +
    '<p>' +  y + ' at ' + x + '</p>' +
    '<img src="'+ thumbPath+ '" alt="some_text">'
  })

这显示了不同的 x 标签值的不同缩略图.我的问题如下；是否可以使用 rCharts 实现上述内容，或者我是否必须修改源代码?

This shows different thumbnails for different values of the x label. My question is as follows; Is it possible to implement the above with rCharts as it stands or will I have to modify the source?

推荐答案

这里是一个关于如何在 rCharts 中为 NVD3 指定工具提示的最小示例.您想从 R 传递的任何 JS 文字，包括 JS 函数都需要包裹在 #! 和 !# 标签之间，以便 R 知道在转换过程中不要将它们转换为字符串到 JSON.图表输出可以在这里看到 http://rcharts.io/viewer/?5948336

Here is a minimal example on how to specify a tooltip in rCharts for NVD3. Any JS literals you want to pass from R, including JS functions need to be wrapped between #! and !# tags so that R knows not to convert them into strings during conversion to JSON. The chart output can be seen here http://rcharts.io/viewer/?5948336

require(rCharts)
n1 <- nPlot(mpg ~ wt, group = 'gear', data = mtcars, type = 'scatterChart')
n1$chart(tooltipContent = "#! function(key, x, y){ 
  return 'x: ' + x + '  y: ' + y 
} !#")

一般来说，任何图表方法chart.x(y)在rCharts中转换为n1$chart(x = y)，带有y 如果需要，可以用标签装饰.

In general, any chart method chart.x(y) translates to n1$chart(x = y) in rCharts, with y being decorated with tags if required.

希望这会有所帮助.

这篇关于rCharts rNVD3 工具提示自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！