通过jQuery在现有网页中嵌入R htmlwidgets?

Question

实际上我正在关注堆栈溢出的问题

将 R htmlwidget 嵌入到现有网页中

上面的问题显示了嵌入图形的两种方法

• 菲律宾比索
• Jquery

目前我正在使用jQuery ajax方法来嵌入它工作的json，但在第二个ajax请求图上没有更新。但是当我重新加载页面时，图表将更新。所以我想在不重新加载整个页面的情况下更新图表。

** Updating data.json**

jQuery.ajax({
url : '/modules/multistep_form/plotlyjson/775_graph2_data.json',
beforeSend : function() {
},
type : 'POST',
cache : false,
success : function(data) {
//console.log(data);
// $("#data-json-graph2").text("");
console.log($("#data-json-graph2").text(""));
$("#data-json-graph2").append(JSON.stringify(data));
setTimeout(function(){
window.HTMLWidgets.staticRender();
Drupal.attachBehaviors();
}, 1000);
},
error : function(xhr, status, error) {
// executed if something went wrong during call
if (xhr.status > 0)
alert('got error: ' + status);
}
});
**Updating style.json**
jQuery.ajax({
url : '/modules/multistep_form/plotlyjson/775_graph2_style.json',
beforeSend : function() {
},
type : 'POST',
cache : false,
success : function(data) {
//console.log(data);
//$("#style-json-graph2").text("");
console.log($("#style-json-graph2").text(""));
$("#style-json-graph2").append(JSON.stringify(data));
setTimeout(function(){
window.HTMLWidgets.staticRender();
Drupal.attachBehaviors();
}, 1000);
},
error : function(xhr, status, error) {
// executed if something went wrong during call
if (xhr.status > 0)
alert('got error: ' + status);
}
});

Answer 1

要使用 ajax 更新图形，请按照以下步骤操作

1. 从图形容器中删除类html-widget-static-bound
2. 同时清空 json 数据容器$("#data-json-graph2").text("");
3. 在图形容器上调用Plotly.newPlot("plotly-graph2");

下面是完整的代码示例

//js for Making Dynamic  plolty ....
$("#btn1").click(function(){
$("#plotly-graph2").removeClass("html-widget-static-bound");
$("#data-json-graph2").text("");
var Hashtagsvalue = $('#selectfreqvalue').val(); 
var nid =  $('#nid').val();
var filePath = $('#path').val();
jQuery.ajax({
url : '/type3',
data : {
Hashtagsvalue : Hashtagsvalue,
filePath : filePath,
nid : nid
},
beforeSend : function() {
jQuery("#loader-container").css('display','block');
jQuery("#loader-container .ajax-loader").show();
},
type : 'post',
cache: false,
success : function(data) {
var graph2Json = '/modules/multistep_form/plotlyjson/'+nid+'_graph2_data.json';
if(data['output'] == 'success'){
/***********************************************/
jQuery.ajax({
url : graph2Json,
beforeSend : function() {
},
type : 'POST',
cache : false,
success : function(data) {
console.log(JSON.stringify(data));
$("#data-json-graph2").append(JSON.stringify(data));
setTimeout(function(){
window.HTMLWidgets.staticRender();
Drupal.attachBehaviors();
}, 1000);
Plotly.newPlot("plotly-graph2");
},
error : function(xhr, status, error) {
// executed if something went wrong during call
if (xhr.status > 0)
alert('got error: ' + status);
}
});
}
jQuery("#loader-container .ajax-loader").hide();
jQuery("#loader-container").css('display','none');
},
error : function(xhr, status, error) {
// executed if something went wrong during call
if (xhr.status > 0)
alert('got error: ' + status);
}
});
});