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

最新推荐文章于 2022-09-20 11:35:07 发布

原创最新推荐文章于 2022-09-20 11:35:07 发布 · 7.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用Highcharts库创建动态调整大小的统计图表，并实现点击事件来展示详细信息。文章深入探讨了配置图表样式、响应式设计及数据交互的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考了一些： 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')
		}
		
	});	
}