【奇怪系列】解决highcharts无法渲染到指定div区域的问题

做过highcharts的都知道，highcharts图表的宽和高是由它的容器div来决定的。即：

 

$('#container').highcharts({
        chart: {
            type: 'area'
        },
//......
});

 其中container为一个div的id， 表明这个highcharts的显示区域为这个div的区域。

<div id="container" class="trend"></div>

 

但是，最近我在做的过程中，某个页面无论对这个div怎样设置宽高（百分比和具体数值都试过），这个highcharts都不能正确地显示在其中。如图：

红色区域为父容器div，灰色部分为highcharts显示的效果。 

 

本来，这是一个不需要考虑的问题，但是现在出现了，却觉得很麻烦。

后来，看到highcharts的charts有width和height属性，于是我就我先用浏览器工具查看好父容器div的width和height，再将highcharts的charts里面的width和height属性跟其设置的一样即可：

如我的容器div的的属性如下：

.trend{width:1299px; height:214px}

 那么，我在highcharts里就这样设置：

$('#container').highcharts({
        chart: {
            type: 'area',
            width:1299,
            height:214,
           marginRight:10;//留一点地儿给y轴上刻度的显示
 },
//......
});

 这样，就不会出现这个奇怪的问题了。

 

大部分情况下，这个问题是无需考虑的，可能有时候跟你所在平台的前端环境有关。。