我试图让我的渲染图填充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％; }

相关问题