Ancho del artículo de Highcharts no 100% en carrusel

Estoy creando dinámicamente gráficos de gráficos altos en mi carrusel de arranque.

Tengo un carrusel como este:

 

El primer elemento muestra el 100% del ancho del div como este: imagen1

El segundo elemento tiene un ancho fijo de 400px como este: introduzca la descripción de la imagen aquí

No he establecido el ancho y la altura en mis opciones de gráfico. Estas son mis opciones:

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

¿Alguien sabe como puedo arreglar esto?

Parece que los gráficos necesitan un tamaño de ventana ya que las diapositivas del carrusel no están cargadas en el dom, además de la diapositiva activa. Puede agregar algo como esto a su código para hacer que se redimensione en el evento de diapositiva.

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

Desearía usar un setTimeout para permitir que la siguiente diapositiva aparezca en el dom antes de cambiar el tamaño de la ventana.

Intereting Posts