我正在我的bootstrap轮播中动态创建highcharts图 .
我有这样的旋转木马:
<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%宽度,如下所示:
第二个项目的固定宽度为400像素,如下所示:
我没有在图表选项中设置宽度和高度 . 这些是我的选择:
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: []
}
谁知道我怎么解决这个问题?
1 回答
似乎图表需要调整窗口大小,因为除了活动幻灯片之外,旋转木马幻灯片没有加载到dom中 . 您可以在代码中添加类似的内容,以便在幻灯片事件上调整大小 .
您可能希望使用setTimeout在调整窗口大小之前允许下一张幻灯片出现在dom中 .