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

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

但是，第二次打开带有图表的对话框时，我没有重新加载得到的页面：

我想表达的方式是：

控制器： 主要观点： 我有一个类似的问题，可以通过在对话框的打开功能上初始化google maps来解决，如下所示：

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

---

我想我将不得不对Chartkick做同样的事情，但不确定调用什么。

我能够通过每次打开对话框时调用调整大小事件来克服这个问题

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

在chart div中还添加了一点样式

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

必须将此添加到我的对话框div中，因为出现了溢出并滚动

#reject_chart_dialog {
    overflow: hidden !important;
}

---

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

我能够通过每次打开对话框时调用调整大小事件来克服这个问题

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

在chart div中还添加了一点样式

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

必须将此添加到我的对话框div中，因为出现了溢出并滚动

#reject_chart_dialog {
    overflow: hidden !important;
}

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

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

#reject_chart_dialog {
    overflow: hidden !important;
}