ruby-on-rails - Highcharts 超过了 chrome 中的容器

Question

我在 Highcharts 中使用了饼图，我在使用 chrome 浏览器时遇到了一个奇怪的问题。我将它与 rails 一起使用，当第一次加载链接时，一切看起来都很好。(找到下图)

当我浏览其他菜单并返回仪表板时，图表超出了 Bootstrap 列中的实际容器

<div class="row">
<div class="col-lg-6">
  ...
</div>
<div class="col-lg-6" id="chart_issues_count">
</div>
</div>

Highcharts 代码

$('#chart_issues_count').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Issues',
                align: 'center',
                verticalAlign: 'middle',
                y: 5
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            display:'none',
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    },
                    size: 300,
                    startAngle: 0,
                    endAngle: 360,
                    center: ['50%', '50%']
                }
            },
            series: [{
                type: 'pie',
                name: 'Issues',
                innerSize: '70%',
                data: [
                    ['Open',   open],
                    ['In - Process',       process],
                    ['Solved', solved],
                    ['Closed',    closed],
                    ['Re - Open',    reopen]

                ]
            }]
        });

这只发生在 chrome 上。我已经在 firefox、IE、Safari 上测试过，在所有这三种浏览器中它都工作正常。

chrome 有什么解决方法吗？

我也尝试过如下回流，但它不起作用

$(window).load(function(){
        $('#chart_issues_count').highcharts().reflow();
    });

编辑

Chrome Version 51.0.2704.106 m

更新

我注意到样式仅在页面加载后应用。因此，它会暂时闪烁没有样式的内容，然后应用样式。这是 Rails 的行为吗？(我对 Ruby on Rails 还很陌生)我熟悉的 PHP 从来没有发生过这种情况。

Answer 1

终于找到了解决办法。我正在使用 Bootstrap CDN 链接，rails 似乎在 $(document).ready(); 之后加载了 CDN 链接(我不确定)。我在 ready 方法中加载 highchart，它占用正在加载图表的列的 100% 宽度(在应用 Bootstrap 之前)。

我安装了 bootstrap gem，现在一切都按预期正常工作。

https://github.com/twbs/bootstrap-sass

我应该更好地学习 Rails 结构及其工作。