我正在创建一个闪亮的应用程序,我使用rCharts包,我有一个问题,在图的所有点上方修复标签。
library(rCharts)
age <- c(1:20)
tall <- seq(0.5, 1.90, length = 20)
name <- paste(letters[1:20], 1:20, sep = "")
df <- data.frame(age = age, tall = tall, name = name)
n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
n1$xAxis(axisLabel = "the age")
n1$yAxis(axisLabel = "the tall", width = 50)
n1$chart(tooltipContent = "#! function(key, x, y, e ){
var d = e.series.values[e.pointIndex];
return 'x: ' + x + ' y: ' + y + ' name: ' + d.name
} !#")
n1
例如,我想经常看到&#34; name&#34;以上几点,而不必用鼠标来传递!
提前谢谢!
P.S:是否可以使用带有光泽的clickme包,我尝试了数千次,但显然它不起作用?答案 0 :(得分:2)
for shiny + clickme请参阅http://www.slideshare.net/nachocab/interactive-r-visualizations-using-shiny-and-clickme,但也要注意rCharts可以使用http://mostlyconjecture.com/blog/中的自定义模板,然后可以使用renderChart
或renderChart2
轻松部署这些模板。
对于nvd3
标签问题,答案很快就变得复杂了。我们打算将其中一些rCharts
行为标准化,但我不确定这将是一个。但是,这可能会让你开始。要在演示中查看,请参阅here或live example。
library(rCharts)
age <- c(1:20)
tall <- seq(0.5, 1.90, length = 20)
name <- paste(letters[1:20], 1:20, sep = "")
df <- data.frame(age = age, tall = tall, name = name)
n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
n1$xAxis(axisLabel = "the age")
n1$yAxis(axisLabel = "the tall", width = 50)
#assuming you don't want tooltips if you have labels
#change back to what you had if assumption incorrect
n1$chart(tooltipContent = NULL)
#grab template from
#https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html
#modify to add callback on graph render
n1$setTemplate(script = sprintf("
<script type='text/javascript'>
$(document).ready(function(){
draw{{chartId}}()
});
function draw{{chartId}}(){
var opts = {{{ opts }}},
data = {{{ data }}}
if(!(opts.type==='pieChart' || opts.type==='sparklinePlus' || opts.type==='bulletChart')) {
var data = d3.nest()
.key(function(d){
//return opts.group === undefined ? 'main' : d[opts.group]
//instead of main would think a better default is opts.x
return opts.group === undefined ? opts.y : d[opts.group];
})
.entries(data);
}
if (opts.disabled != undefined){
data.map(function(d, i){
d.disabled = opts.disabled[i]
})
}
nv.addGraph(function() {
var chart = nv.models[opts.type]()
.width(opts.width)
.height(opts.height)
if (opts.type != 'bulletChart'){
chart
.x(function(d) { return d[opts.x] })
.y(function(d) { return d[opts.y] })
}
{{{ chart }}}
{{{ xAxis }}}
{{{ x2Axis }}}
{{{ yAxis }}}
d3.select('#' + opts.id)
.append('svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
},%s);
};
</script>
"
,
#here is where you can type your labelling function
"
function(){
//for each circle or point that we have
// add a text label with information
d3.selectAll('.nv-group circle').each(function( ){
d3.select(d3.select(this).node().parentNode).append('text')
.datum( d3.select(this).data() )
.text( function(d) {
//you'll have access to data here so you can
//pick and choose
//as example just join all the info into one line
return Object.keys(d[0]).map(function( key ){
return( key + ':' + d[0][key] )
}).join()
})
.attr('x',d3.select(this).attr('cx'))
.attr('y',d3.select(this).attr('cy'))
.style('pointer-events','none')
})
}
"
))
n1