17

タブ ( jquery-ui-1.8.9) と円グラフをHighcharts 2.1.4一緒に使用したことのある人はいますか? 簡単に言うと、複数のタブがあり、各タブには異なるデータの円グラフが表示されます。チャートは div にレンダリングされますが、2 番目のタブをクリックすると、本来300pxあるべき場所の右側にチャートが表示されます。ブラウザ ウィンドウをズームインまたはズームアウトするたびに、チャートが修正位置に戻ります。

私のコード:

//番号のタブが変数 $count に基づいて生成され、2 つのタブがあるとします 

<script type="text/javascript">

var chart_tab_<?=count?>;

$(document).ready(function() {
    chart_tab_<?=count?> = new Highcharts.Chart({
      chart: {
         renderTo: 'chart_tab_<?=count?>',
         // blah blah
      }

<body>
    <div id="chart_tab_<?=count?>"></div>
</body>

再びグラフがレンダリングされますが、2 番目のタブで表示がバグります。

更新：この種類の問題が修正されることを知っています：

<script type="text/javascript"> 
   $(document).ready(function() {
      $( "#tabs" ).tabs({
          cookie: { expires: 1 }
      });
      $( "#tabs" ).tabs({
          select: function(event, ui) { window.location.reload(); }
      });
   });

しかし、ユーザーがタブをクリックするたびにページをリロードする必要があるため、これは本当に面倒です。どんなアイデアでも素晴らしいでしょう。

4

13 に答える 13

12

これが私の解決策です (Safari と Firefox でのみテストされています)。柔軟な幅のページの非表示のタブにグラフをロードする場合に最適です。ブラウザ ウィンドウのサイズが変更されると、チャートのサイズも変更されます。

グラフの設定で、ページの読み込み時に開くタブからグラフの幅を設定します (jQuery を使用して幅を取得します)。

   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       type: 'column',
       width: $('#tab-1').width()
     },
     ....

次の関数は、ブラウザ ウィンドウのサイズが変更された場合に幅を調整します。500は高さです。チャート オプションで幅が指定されていない場合、これは自動的に行われます。

$(window).resize(function() {
   chart.setSize($('#chart_tab').width(),500);       
});
于 2012-12-09T17:59:00.480 に答える
4

2 番目のチャートは、描画すると隠れるように聞こえるため、オフになっている可能性があります。選択時にチャートを描画してみてください。

ここに、私が想像するもののアイデアを提供するための疑似コードをいくつか示します。これはテストされていません。 

$("#tabs").tabs({
  select: function(event, ui) {
     var chart = new Highcharts.Chart({
      chart: {
       renderTo: ui.panel.id,
       // blah blah
      }
     });

  }
});
于 2011-04-27T15:19:21.497 に答える
3

サイズ変更イベントを手動でトリガーする必要があります

$(window).trigger('resize');
于 2014-02-10T20:50:13.557 に答える
1

より小さな回避策は、CSS でグラフに静的な幅を使用することです (それが何であるかを知っている場合)。

.tab-pane { width: 1200px; }
于 2012-08-21T20:03:38.977 に答える
0

こんにちは、私のフィドルjsfiddleを参照してください

...
$("#tabs").tabs();
var ids = ['chart-1', 'chart-2', 'chart-3'];
for (var i = 0, j = ids.length; i < j; i++) {
    if ((container = $('#'+ids[i])).size()) {
        if (container.width()==0) {
            container.width(container.actual('width'));   
        }

        oclone = $.extend({}, options);
        oclone.chart.renderTo = ids[i];
        new Highcharts.Chart(oclone);
    }

}
...
于 2013-02-01T09:39:41.990 に答える
0

私は同じ問題に遭遇しました. reflow() メソッドは私のために働きます. グローバル Highcharts 変数にアクセスして、対応するチャートを把握します。ここで、グラフの順序はタブの順序です。

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            show: function (event, ui) {
                var chart = Highcharts.charts[ui.index];
                if (chart != null) {
                    chart.reflow();
                }
            }
        });
    });
</script>
于 2014-07-01T08:45:30.513 に答える
0

class="chart"タブ内のすべてのハイチャート コンテナーに追加します。

この jQuery コードを追加します。

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
于 2016-06-03T21:03:13.207 に答える
0

文字化けしたチャートで開くjQueryアコーディオンがありました...これが私の解決策でした：

最初にチャートをグローバルに詰め込みます：window.myNamespace.charts.#{container_id}、次に私のアコーディオンでこれを行います：

$('#my-accordion').accordion
  ...,
  change: () ->
    chartId = ui.newContent.find('.highcharts-container').parent().attr('id')
    window.myNamespace.charts[chartId].setSize(248,220) if chartId?

上記はcoffeescriptですが、翻訳するのは簡単なはずです...

基本的に、チャートでsetSizeを呼び出して、すでにあるサイズに設定しています...これは、開いた後にチャートをクリーンアップする効果があります...これは単なる回避策であることを認めます...理想的にはハイチャートバグを修正し、隠し要素からサイズを計算しようとする代わりに、私が与えたサイズを使用します

于 2012-04-11T14:33:25.283 に答える
0

jQuery UI 1.9+ では、タブを非表示にする方法が変更されました。この方法でタブをアクティブにするときは、独自のクラスを設定する必要があります。

$('#tabs').tabs({
  beforeActivate: function (event, ui) {
    $(ui.oldPanel).addClass('ui-tabs-hide');
    $(ui.newPanel).removeClass('ui-tabs-hide');
  }
});

次の CSS と組み合わせます。

.ui-tabs-hide { 
  display: block !important; 
  height: 0!important; 
  width: 0!important; 
  border:none!important; 
}

これにより、Flash 埋め込みオブジェクトが非表示のタブで正しく読み込まれない問題も修正されます。

于 2013-02-08T17:51:06.480 に答える
0

グラフがデフォルトでアクティブ化されていないタブにある場合は常に、クライアントでグラフがゼロ幅でレンダリングされるという同様の問題がありました。この回答は、ojreadmore の回答に触発されました。jQuery の document ready イベントを使用してハイチャートを初期化する代わりに、チャートが表示されているタブの activate イベントを使用する必要があります。これには、ユーザーがタブをクリックするたびにおしゃれなグラフ アニメーションが表示されるという追加の利点があります。

それ以外の：

$(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

使用する：

$('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​
于 2013-02-06T03:56:23.657 に答える