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

Question

实际上我正在关注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);
    }
  });

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

});