Javascript Highchart在调整大小且不采用父级宽度时消失
我实际上在一个包含一些统计数据的页面上工作，我对highcharts有一个问题。我在互联网上搜索解决方案已经两个小时了，但没有找到任何解决方案 第一个问题，我使用bootstrap3，所以我的容器是col-xs-6宽的。在我的文档中，这大约是350px宽。图表以600px的宽度呈现 当然，我找到了reflow（）方法，当我在FF的控制台中手动执行它时，它就工作了，但我试着这样执行它，但没有工作Javascript Highchart在调整大小且不采用父级宽度时消失,javascript,jquery,twitter-bootstrap,highcharts,Javascript,Jquery,Twitter Bootstrap,Highcharts,我实际上在一个包含一些统计数据的页面上工作，我对highcharts有一个问题。我在互联网上搜索解决方案已经两个小时了，但没有找到任何解决方案 第一个问题，我使用bootstrap3，所以我的容器是col-xs-6宽的。在我的文档中，这大约是350px宽。图表以600px的宽度呈现 当然，我找到了reflow（）方法，当我在FF的控制台中手动执行它时，它就工作了，但我试着这样执行它，但没有工作 function getContents(courses, user) { $.ajax({
function getContents(courses, user) {
$.ajax({
url: BeginUrl + 'analyse/get/content',
type: "post",
data: {courses: courses, user_id: user},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $('meta[name="_token"]').attr('content'))
},
error: function (data) {
swal("Oops", data.error.message, "error");
},
success: function (data) {
if (data.success) {
//update bar about content
$('#hero-bar').html('');
$('#hero-bar').highcharts({
chart: {
renderTo: 'hero-bar',
type: 'column',
events:{
load: function() {
this.reflow();
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: data.contents.categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
pointFormat: '<tr>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
series: data.contents.series
});
}
},
complete: function() {
$('#loader-content-box').fadeOut(400, function(){
$('#content-box').fadeIn(400);
});
}
});
}
有人有想法或者已经有问题了吗？第一个问题用
$('#hero-bar').highcharts({
chart: {
renderTo: 'hero-bar',
type: 'column',
events:{
load: function(){
var c = this;
setTimeout(function() {
$('#hero-bar').highcharts().reflow();
}, 500);
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: data.contents.categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
pointFormat: '<tr>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
series: data.contents.series
});
$（“#英雄栏”）。高图({
图表：{
renderTo:“英雄酒吧”，
键入：“列”，
活动：{
加载：函数（）{
var c=这个；
setTimeout（函数（）{
$（“#英雄栏”）.highcharts（）.reflow（）；
}, 500);
}
}
},
学分：{
已启用：false
},
图例：{
已启用：false
},
标题：{
文本：空
},
xAxis：{
类别：数据.contents.categories，
十字准星：对
},
亚克斯：{
分:0,，
标题：{
文本：“”
}
},
工具提示：{
headerFormat:“{point.key}”，
点格式：“”+
“{point.y}”，
页脚格式：“”，
分享：是的，
useHTML:true
},
打印选项：{
专栏：{
点填充：0.1，
边框宽度：0
}
},
系列：data.contents.series
});
有什么想法吗？查看类似主题：/@SebastianBochan修复了我的宽度问题，但没有解决我的消失问题。无论如何谢谢^^我仍然不明白它为什么会在调整大小时消失……你能在jsfiddle.net上以实时演示的形式重新创建你的第二个问题吗（例如使用硬编码数据）？Hello@David，你解决了你的第二个问题了吗？我面临的问题基本上是相同的。仍在工作，无法绘制图表。
$('#hero-bar').highcharts({
chart: {
renderTo: 'hero-bar',
type: 'column',
events:{
load: function(){
var c = this;
setTimeout(function() {
$('#hero-bar').highcharts().reflow();
}, 500);
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: data.contents.categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
pointFormat: '<tr>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0
}
},
series: data.contents.series
});