通过jQuery在现有网页中嵌入R htmlwidgets？答案

【问题标题】：Embedding R htmlwidgets in existing webpage through jQuery?通过jQuery在现有网页中嵌入R htmlwidgets？
【发布时间】：2017-08-22 10:04:09
【问题描述】：

其实我在关注stackoverflow的这个问题

Embedding an R htmlwidget into existing webpage

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

PHP
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);
    }
  });

【问题讨论】：

标签： jquery r plotly htmlwidgets

【解决方案1】：

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

从图形容器中删除类 html-widget-static-bound
同时清空你的json数据容器$("#data-json-graph2").text("");
在图形容器上调用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);
    }
  });

});

【讨论】：