2

円チャートでHighchartsを使用しましたが、クロームブラウザで奇妙な問題があります。私は負荷すべてが正常に見える初めてのリンクrailsとし、ときにそれを使用しています。私は他のメニューをナビゲートするとき enter image description hereハイチャートがクロムの容器を超えています

(下の画像を見つける。)と、ダッシュボードに戻ってきて、チャートは実際のコンテナを超えていますブートストラップ列にある

enter image description here

<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ではこれが起こりませんでした。

+0

こんにちは、私はあなたの問題がこの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 –

答えて

0

最後に解決策が見つかりました。私はブートストラップCDNリンクを使用していました。レールは$(document).ready();の後にCDNリンクをロードしているようです(私はそれについてはわかりません)。私はreadyメソッドでハイチャートをロードします。ここでは、チャートがロードされている(ブートストラップが適用される前の)列の幅が100%になります。

私はブートストラップの宝石をインストールしましたが、今は正常に動作しています。

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

私はレールの構造とその動作をよりよく学習する必要があります。

関連する問題