HighCharts全宽度问题

我试图使我的渲染图表填充100％的父div没有成功。 有什么办法可以消除左右两侧的空隙吗？

http://jsfiddle.net/sKV9d/

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 } }] }); 

Answer 1

如果你删除选项width: 300, height: 200如下所示：

  var chart = new Highcharts.Chart({ chart: { renderTo: 'chart', margin: 0, defaultSeriesType: 'areaspline' }, ... 

它将自动填充容器。

Answer 2

问题是因为jquery UI。 渲染图表后，请调用此代码以重排图表。 这解决了我的问题

 chart.reflow(); 

Answer 3

将minPadding和maxPadding设置为0，请参阅： http ： //jsfiddle.net/sKV9d/3/

Answer 4

试试这个 ：

 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 } }] }); 

Answer 5

我解决了

 window.dispatchEvent(new Event('resize')); 

UPD：

1. 删除宽度和高度属性。
2. 将以下代码添加到.css中，以便将图表块调整为#container的100％：

图表{宽度：100％; 身高：100％; }

2A。 另一种方法是 – 如果在“设计”时间内无法定义容器大小，您可以在图表加载后重排图表（即调用chart.reflow（）;）：

 chart: { events: { load: function(event) { **event.target.reflow();** } } }, 

参见示例http://jsfiddle.net/yfjLce3o/

Answer 6

如果未向图表提供width属性，则应自动获取容器的宽度。 所以只需从图表中删除宽度并给出容器width: 100% ，这应该可行。

如果需要特定宽度，只需将容器宽度更改为特定大小即可。 图表应该仍然是该尺寸的100％。 的jsfiddle

例：

HTML

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

 #container { width: 100%; height: 200px; } 

Answer 7

使用updateChart函数并在该函数内调用chart.reflow（）

 scope.updatechart = function(){ scope.chart.reflow(); } 

使用任何刷新机制每30秒调用一次updatechart方法