2016-03-28 67 views
0

我正在使用Highcharts在我的应用程序中使用angularjs显示一些统计信息。当页面加载时,图表加载正常。Highchart不能正确调整角度js

当我改变方向, it looks like

,当我再次从横向改变方向为纵向它some thing looks like

我试图改变CSS在许多方式,但它每次不适合全屏。有没有人知道为什么Highchart对方向改变没有反应?

编辑:代码片断

var chart1 = new Highcharts.chart('demograph', { 
 
\t \t \t \t \t \t  
 
\t \t \t \t \t \t  "options": { 
 
\t \t \t \t \t \t \t  "chart": { 
 
\t \t \t \t \t \t \t  "type": "areaspline" 
 
\t \t \t \t \t \t \t  
 
\t \t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t \t  "plotOptions": { 
 
\t \t \t \t \t \t \t  "series": { 
 
\t \t \t \t \t \t \t   "stacking": "" 
 
\t \t \t \t \t \t \t  } 
 
\t \t \t \t \t \t \t  } 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t "series": [ 
 
\t \t \t \t \t \t \t  { 
 
\t \t \t \t \t \t \t  "name": "Highest", 
 
\t \t \t \t \t \t \t  "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
 
\t \t \t \t \t \t \t  "type": "column", 
 
\t \t \t \t \t \t \t  "id": "series-0" 
 
\t \t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t \t  { 
 
\t \t \t \t \t \t \t  "name": "Lowest", 
 
\t \t \t \t \t \t \t  "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], 
 
\t \t \t \t \t \t \t  "type": "column", 
 
\t \t \t \t \t \t \t  "id": "series-1" 
 
\t \t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t \t  { 
 
\t \t \t \t \t \t \t  "name": "Average", 
 
\t \t \t \t \t \t \t  "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], 
 
\t \t \t \t \t \t \t  "type": "column", 
 
\t \t \t \t \t \t \t  "id": "series-2" 
 
\t \t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t \t  { 
 
\t \t \t \t \t \t \t  "name": 'Louis', 
 
\t \t \t \t \t \t \t  "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], 
 
\t \t \t \t \t \t \t  "id": "series-3", 
 
\t \t \t \t \t \t \t  "type": "line" 
 
\t \t \t \t \t \t \t  } 
 
\t \t \t \t \t \t \t ], 
 
\t \t \t \t \t \t \t "title": { 
 
\t \t \t \t \t \t \t  "text": "Progress Report" 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t "credits": { 
 
\t \t \t \t \t \t \t  "enabled": true 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t "loading": false, 
 
\t \t \t \t \t \t \t "size": {}, 
 
\t \t \t \t \t \t \t "xAxis": { 
 
\t \t \t \t \t \t  \t "categories": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
 
\t \t \t \t \t \t  \t "title": {text: 'Tests'} 
 
\t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t  "yAxis": { 
 
\t \t \t \t \t \t  \t "title": {text: 'Marks Obtained'} 
 
\t \t \t \t \t \t  }, 
 
\t \t \t \t \t \t \t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="col-md-12 col-sm-12 col-xs-12 myclass2" style=""> 
 
    <div id="demograph" class="clsdemograph" >Placeholder for chart</div> 
 
</div>

+1

你能提供你正在使用的演示代码html/css吗?你可以使用jsfiddle来实现这个 – shershen

+0

实际上它是一些复杂的添加代码,因为它是动态内容和CSS,所以我没有添加它。但是,如果我可以提供一些代码,让我试试。 –

+0

@shershen。添加了演示代码。请检查。 –

回答

0

你可以试试下面的代码?

<div id="demograph" class="clsdemograph" style="height: 100%; width: 100%; position: absolute;">Placeholder for chart</div>