在对话框中的第二个渲染上发出渲染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>

application.js文件

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

我有一个类似的issue to this rendering google maps in a dialog box并且能够通过在对话框的打开功能上初始化谷歌地图来修复它，如下所示：

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

我想我必须和Chartkick做同样的事情，但不知道该怎么称呼。

Answer 1

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

$( "#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;
}

只是让它看起来好一点。