highcharts：如何让highcharts图表自适应浏览器窗体
参考了一些： http://www.stepday.com/topic/?740
最终自已的例子，e.g.
//设置统计图形的宽度
var screenWidth = $("body").width();
$(".highchartImg").each(function(){
$(this).width(screenWidth*0.555);
});
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;i0){
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 ''+ this.series.name +'：'+ this.y +$.language.getText('TOPIC_AT_TIME_COUNT_UNIT_TEXT')+'
'+ $.language.getText('REPORT_TABLE_DATE') +'：' +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')
}
});
}