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

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

 

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

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

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

 

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


【奇怪系列】解决highcharts无法渲染到指定div区域的问题_第1张图片
红色区域为父容器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轴上刻度的显示
 },
//......
});

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

 

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

 

你可能感兴趣的:(highcharst,显示区域)