Javascript 所有Broswer中的Highcharts渲染问题

这似乎是一个常见的问题，但最后一个线程已超过5年

出于某种原因，除非调整浏览器的大小，否则我的HighCharts

容器无法正确渲染。这个问题出现在不到一周前，我没有修改任何代码。令人沮丧

有几个线程表明Highcharts库与JQuery库不兼容是一个问题，我已经确保这两个库都是最新的。我甚至回顾了所有可用的JQuery旧版本，以确保这不是问题所在

我不是很精通JS，所以如果你有建议（比如插入调整容器大小的行），你能具体说明一下放在哪里/语法吗？谢谢

这里有一个指向我的JSFIDLE的链接（它实际上在这里正确渲染）


还有一个指向我的网站的链接，在该链接中，所有浏览器都会显示失真。

这里的问题似乎是
容器
元素中的
最小宽度
属性。如果删除该属性，图表的图例将按预期显示（请参见下面的屏幕截图，我使用inspect工具将其删除）

Highcharts是本机响应的，因此它通常会将其放置的任何元素填充到100%。似乎通过设置最小宽度约束，图例项的宽度不会超过您设置的宽度（310像素）

正如您所注意到的，无论何时调整浏览器的大小，响应代码都会根据窗口调整大小触发器接管并管理图表的尺寸。我认为是初始加载设置导致了您的问题

我希望这对你有帮助

试试这把小提琴，它会在浏览器上自动调整highchart的大小


/*
请注意，未设置高度
*/
$（函数（）{
Highcharts.Chart.prototype.is3d=函数（）{
返回this.options.chart.options3d&&this.options.chart.options3d.enabled；//#4280
};
$（“#ChartContainer2”）。高图({
图表：{
类型：'bar'，
选项3D：{
启用：对，
阿尔法：15，
贝塔：15，
视距：0，
深度：70
},
玛金托普：120，
marginBottom:120
},
标题：{
文本：“堆叠条形图”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯：{
分:0,，
标题：{
正文：“水果总消费量”
}
},
图例：{
对
},
打印选项：{
系列：{
堆叠：“正常”，
pointWidth:30//无论图表大小，列条的宽度
},
酒吧：{
深度：50，
身高：50，
光标：“指针”，
要点：{
活动：{
单击：函数（）{
var drilldown=this.drilldown；
如果（向下钻取）{//向下钻取
//警报（drilldown.TaskID+''+drilldown.name）；
美元（“#PacingModal”）.modal（‘show’）；
}
}
}
},
数据标签：{
启用：对，
//轮换：-90，
里面:对,，
颜色：“#FFFFFF”，
//对齐：“右”，
x:40，
y:15，
风格：{
fontSize:'13px'，
fontFamily:“Verdana，无衬线”，
textShadow:'0 0 3px黑色'
},
格式化程序：函数（）{
返回这个.y+'%'；
}
}
}
},
系列：[{
名称：'不完整'，
数据：[{
y:5，
向下展开：{
任务编号：343434545252，
名字：“某物名字”
}
}, {
y:3，
向下展开：{
任务编号：343434545252，
名字：“某物名字”
}
}, {
y:4，
向下展开：{
任务编号：343434545252，
name:'somename'
}
}, {
y:7，
向下展开：{
任务编号：343434545252，
名字：“某物名字”
}
}, {
y:2，
向下展开：{
任务编号：343434545252，
名字：“某物名字”
}
}]
}, {
名称：“清理”，
数据：[2,2,3,2,1]
}, {
名称：“完成”，
数据：[3,4,4,2,5]
}]
});
});
#ChartContainer2{
身高：100%；
宽度：100%；
位置：绝对位置；
}

您提到这个问题不久前就出现了。你能告诉我你用的是哪个海图版本吗？尝试使用较旧的链接（例如code.highcharts.com/5.0.12/highcharts.js），看看问题是否仍然存在。
我同意您的说法，因为Google Chrome关注您的示例链接-页面加载时图例被篡改，浏览器窗口大小的任何更改都会导致重新绘制，从而使图例的布局正确。您提到过，这个问题不久前就出现了。你能告诉我你用的是哪个海图版本吗？尝试使用旧版本（例如），看看问题是否仍然存在。@d_paul此版本工作得很好。你能把它作为答案贴出来让我接受吗？非常感谢！我试了一下，没有任何改进。是否确定它没有正确渲染，因为在检查元素时浏览器调整了大小？
minwidth
属性现在被删除，但同样的问题出现了。@Manaconda你说得对。。。inspect窗口已导致窗口重新调整大小，给出了一个假阳性。我道歉。不过，我又看了一眼，your site.css给
#container
元素的最小宽度也是310。。。尝试更改div标记的ID（如
），以查看是否有任何其他站点样式（来自Squarespace或其他源）导致冲突。下面是有问题的具体行：
#容器{高度：300px；最小宽度：310px；最大宽度：800px}
（site.css中的第18行）感谢您的关注。新版本的Highcharts.js有一些缺点