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更新图表，请按照以下步骤操作

从图表容器中删除 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？

1 个答案: