在对话框中的第二次渲染时发出渲染 Chartkick答案

【问题标题】：Issue Rendering Chartkick on 2nd render in Dialog Box在对话框中的第二次渲染时发出渲染 Chartkick
【发布时间】：2015-08-10 18:45:05
【问题描述】：

我在我的应用程序中安装了 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 做同样的事情，但不知道该调用什么。

【问题讨论】：

标签： jquery ruby-on-rails dialog chartkick

【解决方案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;
}

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

【讨论】：