jquery - 在对话框中的第二次渲染时发出渲染 Chartkick

Question

我在我的应用程序中安装了 Chartkick gem，第一次在 jquery 对话框中呈现图表时一切正常：

但是第二次我打开一个带有图表的对话框而不重新加载我得到的页面：

我得到这个显示的方式是：

控制器：

  def lanes_chart
       data = RejectLoads.group_by_week(:tend_date, week_start: :sat, range: 6.months.ago..Date.today).where(:edi_name => params["company"]).count
       options = {"library" => {"height" => "400px", "title" => "Company: #{params["company"]}}", "hAxis" => {"title" => "Weeks"}, "vAxis" => {"title" => "Count"}}}
     @data = data
     @options = options
  end

主视图：

<div id="reject_chart_dialog" title="Reject Origin Chart">
  <div id="chart"></div>
</div>

<%= link_to_function  "Chart", "chart('#{o}')"%>
<script>
    function chart(state){
        /* code here */
        $.ajax({
            url: "/reports/lanes_chart",
            data: {
                chart_name: "state",
                state: state
            },
            type: "get",
            success: function (data) {
                $("#reject_chart_dialog").dialog("open");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error: ' + textStatus + ': ' + errorThrown);
            }
        });
        return false;
    }
</script>

lanes_chart.js.erb

$("#chart").replaceWith("<%= escape_javascript(render partial: "reports/charts/chart_lanes", locals: {  data: @data, options: @options  }) %>");

_chart_lanes.html.erb

（每次部分替换图表 div）

<div id="chart">
  <%= area_chart data, options %>
</div>

应用程序.js 文件

$( "#reject_chart_dialog" ).dialog({
    autoOpen: false,
    width: 1000,
    buttons: {
        Close: function() {
            $( this ).dialog( "close" );
        }
    }
});

我遇到了与在对话框中渲染谷歌地图类似的问题，并且能够通过在对话框的打开功能上初始化谷歌地图来修复它，如下所示：

$("#map_form").dialog({
    open: function( event, ui ) {
        initialize_map();
    },
    autoOpen: false,
    width: 1000,
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

我想我将不得不对 Chartkick 做同样的事情，但不知道该叫什么。

Answer 1

每次打开对话框时，我都可以通过调用调整大小事件来解决这个问题

$( "#reject_chart_dialog" ).dialog({
    open: function() {
        window.dispatchEvent(new Event('resize'));
    },
    autoOpen: false,
    width: 1000,
    buttons: {
        Close: function() {
            $( this ).dialog( "close" );
        }
    }
});

还在图表 div 上添加了一点样式。

.chart-options {
    max-height: 300px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

不得不将其添加到我的对话框 div 中，因为溢出并且滚动了。

#reject_chart_dialog {
    overflow: hidden !important;
}

只是为了让它看起来更好一点。