円チャートでHighcharts
を使用しましたが、クロームブラウザで奇妙な問題があります。私は負荷すべてが正常に見える初めてのリンク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でテストしましたが、3つのブラウザでうまく動作します。
クロムの回避策はありますか?
はまた、私は、私はスタイルが後にのみ適用されていることに気づい
Chrome Version 51.0.2704.106 m
更新
次のようにリフローし、その動作していない
$(window).load(function(){
$('#chart_issues_count').highcharts().reflow();
});
編集して試してみましたページが読み込まれます。その結果、スタイルなしでコンテンツが一瞬だけ点滅し、スタイルが適用されます。それはレールの振る舞いですか(私はRuby on Railsの新機能です)。私が慣れ親しんだPHPではこれが起こりませんでした。
こんにちは、私はあなたの問題がこのSOトピックに接続されている可能性があります: http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect -widths-using- http://stackoverflow.com/questions/25398127/highcharts-wont-fit-in-bootstrap-3-modal-body –