使用Highcharts在线绘制直方图并可导出

 

 

在线绘制网址 

https://jshare.com.cn/new

需要添加常用资源3个

JSP代码

var chart = Highcharts.chart('container',{
	chart: {
		type: 'column',
		style:{
			fontFamily:18
		},
	},
	title: {
		text: '三种方法数据集加载时间对比'
	},
	xAxis: {
		categories: [
			'O(1)','O(2)','O(3)','O(4)','O(5)'
		],
		title: {
			text: '数据集'			
		},
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '加载时间/s',
			align: 'high',
			offset: 0,
			rotation: 0,
			y: -10
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 1
		}
	},credits: {
		enabled: false
	},
	series: [{
		name: '方法1',
		data:[5,8,11,13,17]
	},{
		name: '方法2',
		data: [52,114,176,250,336]
	},{
		name: '方法3',
		data: [49,92,123,192,278]
	}],
	colors: [ 
		'#2f7ed8', '#8bbc21','#FF9655'],
});

HTML代码

<div id="container" style="min-width:400px;height:400px"></div>

运行结果如下：

绘制这一类型的图表需要修改的地方有 横纵坐标标题（xAxis、yAxis）、图表标题（title）、数据集（series）等。

并可导出为文件

修改坐标轴字体

    xAxis: {
		categories: [
			'Oil(1)','Oil(2)','Oil(3)','Oil(4)','Oil(5)'
		],
		title: {
			text: '数据集',
			style: {
				//color: 'red',
				fontSize: '16px',
				fontWeight: 'bold'
			}
		},
		crosshair: true,
		labels: {
			style: {
				//color: 'green',
				fontSize: '14px',
				fontWeight: 'bold'
			}
		}
	}

修改图表标题

    title: {
		text: 'Q(1)查询时间对比',
		style: {
			//color: 'red',
			fontSize: '18px',
			fontWeight: 'bold'
		}
	}