3

ブートストラップ カルーセルでハイチャート グラフを動的に作成しています。

次のようなカルーセルがあります。

<div class="carousel">
  <div class="carousel-inner">
    <div id="item">
      <div id="container1" data-highcharts-chart="0">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    <div id="item">
      <div id="container2" data-highcharts-chart="1">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    <div id="item">
      <div id="container3" data-highcharts-chart="2">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    ...
  </div>
</div>

最初の項目は、次のように div の 100% 幅を示しています。 画像1

2 番目の項目は、次のように 400px の固定幅です。 ここに画像の説明を入力

グラフ オプションで幅と高さを設定していません。これらは私のオプションです：

var optionsbar = {
chart: {
    type: 'bar',
    events: {
        click: function(event) {
            window.location.href = '/result/question/questionid/';
        }
    }
},
xAxis: {
    categories: '',
    title: {
        text: null
    }
},
yAxis: {
    min: 0,
    title: {
        text: 'Aantal keer gekozen',
        align: 'high'
    },
    labels: {
        overflow: 'justify'
    }
},
tooltip: {
    //valueSuffix: ' aantal keer gekozen'
},
plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            color: 'black',
            formatter: function() {
                if (this.y === 0) {
                    return null;
                } else {
                    return this.y;
                }
            }
        },
        stacking: 'normal'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: '#FFFFFF',
    shadow: true
},
credits: {
    enabled: false
},
exporting: {
    enabled: true
},
series: []

}

これを修正する方法を知っている人はいますか？

4

1 に答える 1

0

アクティブなスライド以外に、カルーセル スライドが dom に読み込まれていないため、チャートのウィンドウ サイズを変更する必要があるようです。コードに次のようなものを追加して、スライド イベントでサイズを変更できます。

$('.carousel').carousel({
    interval: 3000
}).bind('slide.bs.carousel', function() {
    setTimeout(function() {$(window).trigger('resize')} , 1);           
});

ウィンドウのサイズを変更する前に、次のスライドが dom に表示されるようにするには、setTimeout を使用します。

于 2015-01-14T02:14:31.557 に答える