jQuery HighCharts 全宽问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16330237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts full width issue
提问by user2341636
Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?
我试图让我渲染的图表填充父 div 的 100%，但没有成功。有什么办法可以消除左右两边的缝隙吗？
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
回答by MISJHA
If you remove the options width: 300, height: 200like this:
如果您删除这样的选项width: 300, height: 200：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
it will fill automatically the container.
它会自动填充容器。
回答by philip mudenyo
The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem
问题是因为 jquery UI。渲染图表后调用此代码以重排图表。这解决了我的问题
chart.reflow();
回答by Pawe? Fus
Set minPaddingand maxPaddingto 0, see: http://jsfiddle.net/sKV9d/3/
设置minPadding和maxPadding为0，请参阅：http://jsfiddle.net/sKV9d/3/
回答by Andriy B.
I solved it by
我解决了
window.dispatchEvent(new Event('resize'));
UPD:
更新：
- remove width and height attributes.
- add into .css the following code in order to adjust chart block to 100% of #container:
- 删除宽度和高度属性。
- 将以下代码添加到 .css 中，以便将图表块调整为 #container 的 100%：
chart { width: 100%; height: 100%; }
图表 { 宽度：100%；高度：100%；}
2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):
2a. 另一种方法是 - 如果在“设计”期间无法定义容器大小，您可以在图表加载后重排图表（即调用 chart.reflow(); ）：
chart: {
events: {
load: function(event) {
**event.target.reflow();**
}
}
},
See example http://jsfiddle.net/yfjLce3o/
回答by Duc Anh
Try this :
尝试这个 ：
var height= $("#container").height();
var width= $("#container").width();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: width,
height: height,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
回答by Andreas Septian
just simply add CSS
只需简单地添加 CSS
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
回答by Anup Bangale
The issue with Highcharts already reported here. To handle this we can do something like mentioned above. I was also facing the same problem so I have solved it by using
Highcharts 的问题已在此处报告。为了解决这个问题，我们可以做一些上面提到的事情。我也面临同样的问题，所以我通过使用解决了它
window.dispatchEvent(new Event('resize'));
after rendering my chart like :
渲染我的图表后：
this.chartData={
... //some required data object to render chart
}
Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
window.dispatchEvent(new Event('resize'));
回答by Shahar
If you do not provide widthproperty to the chart, it should automatically get the width of the container.
So just remove the width from the chart and give the container width: 100%and that should work.
如果您没有为width图表提供属性，它应该会自动获取容器的宽度。因此，只需从图表中删除宽度并提供容器即可width: 100%。
If you want a specific width, just change the container width to a specific size. The chart should still be 100% of that size. JSFiddle
如果您想要特定的宽度，只需将容器宽度更改为特定大小即可。图表仍应为该尺寸的 100%。 JSFiddle
Example:
例子：
HTML
HTML
<div id="container">
<div id="chart"></div>
</div>
JS
JS
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
CSS
CSS
#container {
width: 100%;
height: 200px;
}
回答by Milad Ghalejughi
I tested it, and it is working very well:
我测试了它，它工作得很好：
chart-tab is div, and contains high chart div, so you first need to define two DIVs, first for containing the chart('chart-container'), and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor')for adding the event for 'chart-tab' DIV on-change , and here is the function as follows:
chart-tab 是 div，并且包含高图表 div，所以你首先需要定义两个 DIV，一个是包含chart('chart-container')，其次是 'chart-container' 的容器，即 'chart-tab'，那么一个库必须added('resizesensor')用于为 'chart-tab' DIV on-change 添加事件，功能如下：
new ResizeSensor($('#chart-tab'), function(){
if(chart){
var wid = document.getElementById('chart-tab').clientWidth;
var hei = document.getElementById('chart-tab').clientWidth;
chart.update({
chart: {
width: wid,
height: hei
}
});
}
});
回答by Kiran Gaonkar
You can make use of chart.update function from anywhere across your project.
您可以在项目的任何地方使用 chart.update 函数。
Highcharts.charts.forEach(function (chart) {
chart.update({ chart: { width: some value } }, true, true, true);
})
