highcharts：如何让highcharts图表自适应浏览器窗体

参考了一些： http://www.stepday.com/topic/?740

最终自已的例子，e.g.

//设置统计图形的宽度var screenWidth = $("body").width();$(".highchartImg").each(function(){$(this).width(screenWidth*0.555);});

<div id="tabmofn_1" class="tagContent"><div id="fileNumber_column" class="highchartImg" style="height: 300px; margin: 0 auto"></div></div>

drawLineOrColumnGraphic("fileNumber_column","column",true,xaxis_line,series_line);

/** * 绘制线图或者是Column图 * @param {} container 图形日期的id * @param {} type 图形的类别 "line"或者"column" */function drawLineOrColumnGraphic(container,type,legendEnable,xaxis,series){var step = xaxis.length>10?parseInt(xaxis.length/9):1;chart = new Highcharts.Chart({chart: {renderTo: container,defaultSeriesType: type}, backgroundColor: {            linearGradient: [0, 0, 500, 500],            stops: [                [0, 'rgb(255, 0, 0)'],                [1, 'rgb(200, 0, 0)']            ]        },credits: {            enabled: false        },title: {text: "",x: -20 //center}, plotOptions: {        series: {            cursor: 'pointer',            events: {                click: function(event) {                if("fn"==stasticType_total && event.point.y>0){                var category = "";                var rule = "";                for(var i=0;i<cNameList_fn.length;i++){                if(cNameList_fn[i]==this.name){                category = cRefList_fn[i];                break;                }                }                for(var i=0;i<rNameList_fn.length;i++){                if(rNameList_fn[i]==this.name){                rule = rRefList_fn[i];                break;                }                }                var parameters = {};                var dateRange = event.point.category;                var sDate;                var eDate;                if(dateRange.split("-").length==1){                sDate = "20"+dateRange;                eDate = "20"+dateRange;                }else{                sDate = "20"+dateRange.split("-")[0];                eDate = "20"+dateRange.split("-")[1];                }                                    parameters.modifiedDateStart = new Date(Date.parse(sDate)).getTime();                    parameters.modifiedDateEnd = new Date(Date.parse(eDate)).getTime()+24*60*60*1000;                    parameters.category = category;                    parameters.rule = rule;                    parameters.classifier = classifier_fn;                    parameters.website = siteList_fn;                    //parameters.content = queryContent_fn;                showStasticDetail(parameters);                }                /*else if("kt"==stasticType_total && event.point.y>0){                                showKeywordStatisticDetail(event.point.category, event.point.series.name);                }*/                }            }        }    },xAxis: {gridLineWidth : 1,tickWidth : 5, labels: {                enabled: true,                rotation: 15,    align: 'left',    style: {                    fontSize :'12px'                },                step:step            },categories: xaxis},yAxis: {title: {text:""},allowDecimals : false,min: 0,lineWidth : 1,startOnTick: true,plotLines: [{value: 0,width: 1,color: '#808080'}]},tooltip: {formatter : function() {            var tempDateStr = $(this.x).text();            if(tempDateStr === null || tempDateStr === ''){                tempDateStr = this.x;            }            return '<b>'+ this.series.name +'</b>：'+ this.y +$.language.getText('TOPIC_AT_TIME_COUNT_UNIT_TEXT')+'<br><b>'+ $.language.getText('REPORT_TABLE_DATE') +'</b>：' +tempDateStr;        }},legend: {enabled : legendEnable,layout: 'vertical',align: 'right',verticalAlign: 'top',borderColor : '#909090',x: -10,y: 50,borderWidth: 0,labelFormatter: function() {var total = 0;for(var i=this.yData.length; i--;) { total += this.yData[i]; };if(this.name.length>10){            return this.name.substring(0, 10) + '(' + total + ')';            }            return this.name + '(' + total + ')';}},series: series,/*exporting:{url: intple_server_url+'/chartExport' +"?authToken=" + $intpleConfig.authToken,buttons: {exportButton: {menuItems: [{textKey: 'downloadPNG',onclick: function () {this.exportChart();}}, {textKey: 'downloadJPEG',onclick: function () {this.exportChart({type: 'image/jpeg'});}}, {textKey: 'downloadPDF',onclick: function () {this.exportChart({type: 'application/pdf'});}}, {textKey: 'downloadSVG',onclick: function () {this.exportChart({type: 'image/svg+xml'});}}, {textKey: 'downloadDATA',onclick: function () {exportDATA({data: xaxis,series: series});}}]},printButton: {onclick: function (evt) {var target = evt.srcElement;if (!target || target.length <= 0) {target = evt.target;}var eles = $(target).prevUntil('g');eles.each(function(){$(this).hide();});this.print();setTimeout(function(){eles.each(function(){$(this).show();});}, 500);}}}},*/lang:{downloadPNG: $.language.getText('downloadPNG'),downloadJPEG: $.language.getText('downloadJPEG'),downloadPDF: $.language.getText('downloadPDF'),downloadSVG: $.language.getText('downloadSVG'),exportButtonTitle: $.language.getText('exportButtonTitle'),printButtonTitle: $.language.getText('printButtonTitle'),downloadDATA : $.language.getText('downloadDATA')}});}