Highcharts项目宽度不是100％在旋转木马 [英] Highcharts item width not 100% in carousel

问题描述

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

I'm dynamically creating highcharts graphs in my bootstrap carousel.

我有这样的轮播：

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

The first item shows 100% width of the div like this:

第二个项目的固定宽度为400像这样：

The second item has a fixed width of 400px like this:

我没有设置宽度和高度在我的图表选项。这些是我的选项：

I haven't set the width and height im my graph options. These are my options:

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: []

}

任何人都知道如何解决这个问题。

Anyone knows how I can fix this?

推荐答案

图表需要窗口调整大小，因为除了活动幻灯片之外，圆盘传送带幻灯片不会加载到dom中。您可以在代码中添加类似的代码，使其在幻灯片事件上调整大小。

It seems that the charts need a window resize since the carousel slides aren't loaded into the dom, besides the active slide. You could add something like this to your code to make it resize on the slide event.

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

在调整窗口大小之前，您需要使用setTimeout来允许下一张幻灯片显示在dom中。

You would want to use a setTimeout to allow the next slide to appear in the dom before resizing the window.

这篇关于Highcharts项目宽度不是100％在旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！