Javascript 在R绘图中单击时使div显示
我还不熟悉Javascript与R的结合，我的Javascript知识非常有限。我正在尝试绘制一个棋盘开口的Javascript 在R绘图中单击时使div显示,javascript,r,plotly,r-plotly,Javascript,R,Plotly,R Plotly,我还不熟悉Javascript与R的结合，我的Javascript知识非常有限。我正在尝试绘制一个棋盘开口的绘图，当你点击开口时，它会显示一个棋盘，上面有开口的初始动作 library(plotly) library(htmlwidgets) library(data.table) library(rchess) data("chessopenings") setDT(chessopenings) mychess = chessopenings[1:10] mychess[
绘图，当你点击开口时，它会显示一个棋盘，上面有开口的初始动作
library(plotly)
library(htmlwidgets)
library(data.table)
library(rchess)
data("chessopenings")
setDT(chessopenings)
mychess = chessopenings[1:10]
mychess[, Pop := sample(c(1,2,4), nrow(mychess), replace = T)]
mychess[, fens := sapply(pgn, function(x) {chsspgn <- Chess$new(); chsspgn$load_pgn(x); chsspgn$fen()})]
不幸的是，什么都没有显示。我使用了这里提供的信息，但似乎我遗漏了什么
更新：我尝试了@Bas的建议，使用以下代码转换图像：
png(pic1 <- tempfile(fileext = ".png"));chessboardjs(fen = mychess$fens[1]); dev.off()
text = knitr::image_uri(pic1)
text = sub(".*?,", "", text)
html <- sprintf('<html><body><img src="data:image/png;base64,%s"></body></html>', text)
cat(html, file = tf2 <- tempfile(fileext = ".html"))
browseURL(tf2)
png（pic1如果您像下面这样应用绘图。重新发布（…）
函数，它会工作。请注意，我用一些自定义数据替换了图像，因为我没有棋盘（…）
函数
htmlwidgets::onRender(
q, "
function(el) {
el.on('plotly_click', function(d) {
var pt = d.points[0];
var fen = d.points[0].customdata
var img = {
// location of image
source: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",
// top-left corner
x: 0,
y: 1,
sizex: 0.2,
sizey: 0.2,
xref: 'paper',
yref: 'paper'
};
Plotly.relayout(el.id, {
images: [img]
});
})}
")
如果你像下面那样应用Plotly.relayout（…）
函数，它就会工作。请注意，我用一些自定义数据替换了图像，因为我没有Chessboard（…）
函数
htmlwidgets::onRender(
q, "
function(el) {
el.on('plotly_click', function(d) {
var pt = d.points[0];
var fen = d.points[0].customdata
var img = {
// location of image
source: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",
// top-left corner
x: 0,
y: 1,
sizex: 0.2,
sizey: 0.2,
xref: 'paper',
yref: 'paper'
};
Plotly.relayout(el.id, {
images: [img]
});
})}
")
为了使用Chessboard
函数，必须包含棋盘JavaScript和CSS文件。该函数不会创建div
，而是将棋盘可视化附加到给定的CSS选择器。因此必须事先创建div
闪亮版：
library(plotly)
library(htmlwidgets)
library(data.table)
library(rchess)
library(shiny)
data("chessopenings")
setDT(chessopenings)
mychess = chessopenings[1:10]
mychess[, Pop := sample(c(1,2,4), nrow(mychess), replace = T)]
mychess[, fens := sapply(pgn, function(x) {chsspgn <- Chess$new();
chsspgn$load_pgn(x); chsspgn$fen()})]
ui <- fluidPage(
tags$head(tags$link(href = "https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css", rel = "stylesheet", type = "text/css")),
tags$head(tags$script(src = "https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js")),
plotlyOutput("plt"),
div(id = "myBoard", style="width: 400px")
)
server <- function(input, output, session) {
output$plt <- renderPlotly({
q = plot_ly(mychess, x = ~eco, y = ~Pop) %>%
add_markers(text = ~name,
customdata = ~fens)
onRender(
q, "
function(el) {
el.on('plotly_click', function(d) {
var pt = d.points[0];
var fen = d.points[0].customdata;
var newboard = Chessboard('myBoard', fen);
})}")
})
}
shinyApp(ui, server)
为了使用Chessboard
函数，必须包含棋盘JavaScript和CSS文件。该函数不会创建div
，而是将棋盘可视化附加到给定的CSS选择器。因此必须事先创建div
闪亮版：
library(plotly)
library(htmlwidgets)
library(data.table)
library(rchess)
library(shiny)
data("chessopenings")
setDT(chessopenings)
mychess = chessopenings[1:10]
mychess[, Pop := sample(c(1,2,4), nrow(mychess), replace = T)]
mychess[, fens := sapply(pgn, function(x) {chsspgn <- Chess$new();
chsspgn$load_pgn(x); chsspgn$fen()})]
ui <- fluidPage(
tags$head(tags$link(href = "https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css", rel = "stylesheet", type = "text/css")),
tags$head(tags$script(src = "https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js")),
plotlyOutput("plt"),
div(id = "myBoard", style="width: 400px")
)
server <- function(input, output, session) {
output$plt <- renderPlotly({
q = plot_ly(mychess, x = ~eco, y = ~Pop) %>%
add_markers(text = ~name,
customdata = ~fens)
onRender(
q, "
function(el) {
el.on('plotly_click', function(d) {
var pt = d.points[0];
var fen = d.points[0].customdata;
var newboard = Chessboard('myBoard', fen);
})}")
})
}
shinyApp(ui, server)
谢谢！如果我的理解是正确的，如果你有rchess
软件包，那么你也应该有Chessboard（）函数。但是我也不是很确定，也不知道如何检查（任何提示都会很有帮助）。使图像出现不是我要处理的问题。我明白了–我原以为这是你的问题。我刚刚安装了rchess
包，但JavaScript仍然忽略了棋盘（）
函数。如果您在浏览器中打开绘图输出，右键单击，转到“检查元素”并选择“控制台”，您可以看到JavaScript错误。通过添加Console.log（）
语句，您可以对其进行调试。这很有帮助，谢谢。嗯，在JavaScript部分有可能使用R函数吗？我想我需要的函数就是这里的：https://github.com/jbkunst/rchess/blob/master/R/chessboardjs.R
但我认为这是在使用棋盘（）
不知怎么起作用……如果您认为我应该提出一个新问题，请告诉我。不，据我所知，这是不可能的。您可以将每个点的图像以base64形式存储，将其存储为数据框中的img
，然后使用我上面给出的代码显示图像，其中source=d.points[0].img
。再次感谢！我尝试了png（pic1谢谢！如果我的理解是正确的，如果你有rchess
软件包，那么你也应该有Chessboard（）函数。但是我还是不太确定，也不知道如何检查（任何提示都会非常有用）。使图像出现不是我要处理的问题。我明白了–我原以为这是你的问题。我刚刚安装了rchess
包，但JavaScript仍然忽略了棋盘（）
函数。如果您在浏览器中打开绘图输出，右键单击，转到“检查元素”并选择“控制台”，您可以看到JavaScript错误。通过添加Console.log（）
语句，您可以对其进行调试。这很有帮助，谢谢。嗯，在JavaScript部分有可能使用R函数吗？我想我需要的函数就是这里的：https://github.com/jbkunst/rchess/blob/master/R/chessboardjs.R
但我认为这是在使用棋盘（）
不知怎么起作用……如果您认为我应该提出一个新问题，请告诉我。不，据我所知，这是不可能的。您可以将每个点的图像以base64形式存储，将其存储为数据框中的img
，然后使用我上面给出的代码显示图像，其中source=d.points[0].img
。再次感谢！我尝试了png（pic1谢谢！我有一个非常基本的问题：不使用shiny
，是否可以实现此功能？只使用htmlwidgets
？我试图避免需要服务器…您想要的是标记还是交互式R脚本？作为html标记。（如果更合适的话，也可以采用其他降价方式，但我认为html是一种方式）我用降价版本更新了我的答案。这能帮你解决问题吗？这太棒了！是的，这太完美了！我可以要求你澄清一下你是如何知道你需要存储文件的位置以及整个过程的吗？只是出于好奇，如果不太麻烦的话。非常感谢！谢谢！我有一个非常好的名字ntal问题：不使用shinny
是否可以实现此功能？仅使用htmlwidgets
是否可以实现此功能？我尽量避免使用服务器…您希望是一个标记还是一个交互式R脚本？作为html标记。（或者其他标记，如果更合适，但我认为html是一种方式）我用降价版本更新了我的答案。这能帮你解决问题吗？这太棒了！是的，这太完美了！请允许我澄清一下，你是如何知道你需要存储文件的位置以及整个过程的？只是出于好奇，如果不太麻烦的话。非常感谢！