我試圖讓我的渲染圖填充100％的父div沒有成功。有什麼辦法可以消除左右兩邊的空隙嗎？HighCharts全寬問題

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

來源

2013-05-02 user2341636

如果刪除的選項width: 300, height: 200這樣的：

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

...

它會自動填充容器。

來源

2013-05-02 04:25:19 MISJHA

我測試了這一點，這是行不通的 – 2013-05-02 04:38:23

作爲highcharts DOC說：圖表的明確寬度。默認情況下（當爲空時），寬度根據包含元素的偏移寬度進行計算。缺省爲空。它的工作原理 – 2016-09-12 02:11:55

試試這個：

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

來源

2013-05-02 04:37:53

不幸的是仍然存在差距。圖表本身（svg）是全寬度，看起來數據本身有差距。 – user2341636 2013-05-02 04:57:24

集minPadding和maxPadding爲0，請參閱：http://jsfiddle.net/sKV9d/3/

來源

2013-05-02 11:10:20

我解決它通過

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

UPD：

祛瘀e寬度和高度屬性。
添加到的CSS以下代碼以圖表塊調整到#container的100％：

圖表{寬度：100％;身高：100％; }

2a。另一種方式是 - 在情況下，如果不能在「設計」時可以迴流圖表負荷後圖表定義容器的大小（即，呼叫chart.reflow（）;）：

chart: { 

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

參見例如http://jsfiddle.net/yfjLce3o/

來源

2016-03-22 15:17:28

這不提供問題的答案。要批評或要求作者澄清，請在其帖子下方留言。 - [來自評論]（/ review/low-quality-posts/11731250） – 2016-03-22 18:12:08

是的，你是對的，這不是一個完整的答案。我找到了另一個，我將它添加爲作者的評論。 – 2016-03-23 12:12:53

對我來說看起來不像100％，還有3px的空白。 – ram4nd 2017-04-17 11:07:53

如果您不向圖表提供width屬性，它應該自動獲取容器的寬度。所以只需從圖表中刪除寬度，並給容器width: 100%，這應該工作。

如果您想要一個特定的寬度，只需將容器寬度更改爲特定的大小。該圖表仍應該是該尺寸的100％。 JSFiddle

例子：

HTML

<div id="container"> 
    <div id="chart"></div> 
</div>

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

來源

2016-04-26 07:47:03 Shahar

問題是因爲JQ的用戶界面。渲染圖表後調用此代碼重新排列圖表。這個固定我的問題

chart.reflow();

來源

2017-05-03 08:26:02

這實際上適用於我 – 2017-11-13 17:00:40

HighCharts全寬問題

回答

圖表{寬度：100％;身高：100％; }

相關問題