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

Question

实际上我正在关注Whosebug的这个问题

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

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

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

});

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

Embedding R htmlwidgets in existing webpage through jQuery?

jquery

r

plotly

htmlwidgets