javascript - 轮播中的 Highcharts 项目宽度不是 100%

Question

我正在我的引导轮播中动态创建高图表。

我有一个这样的轮播：

<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% 宽度，如下所示：

第二项的固定宽度为 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: []

}

任何人都知道我该如何解决这个问题？

Answer 1

似乎图表需要调整窗口大小，因为除了活动幻灯片之外，轮播幻灯片没有加载到 dom 中。您可以在代码中添加类似这样的内容，以使其在幻灯片事件中调整大小。

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

在调整窗口大小之前，您可能希望使用 setTimeout 来允许下一张幻灯片出现在 dom 中。