Question

我在Highcharts中使用了饼图，我对chrome浏览器有一个奇怪的问题。我正在使用rails，当第一次加载链接时，一切看起来都很好。（查看下图）

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

<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方法中加载高图，其中加载图表的列的宽度为100％（在引导程序应用之前）。

我安装了bootstrap gem，现在一切正常。

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

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

Highcharts超过了chrome中的容器

1 个答案: