highcharts日常用法的總結之带表格的数据图

加载者2个js

https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js 

https://code.highcharts.com.cn/highcharts/highcharts.js

/**
 * Create the data table
 */
Highcharts.drawTable = function() {
	// user options
	var tableTop = 310,
		colWidth = 60,
		tableLeft = 20,
		rowHeight = 30,
		cellPadding = 3.5,
		valueDecimals = 1,
		valueSuffix = ' %';
	// internal variables
	var chart = this,
		series = chart.series,
		renderer = chart.renderer,
		cellLeft = tableLeft;
	// draw category labels
	$.each(series, function(serie_index, serie) {
		renderer.text(
			serie.name, 
			cellLeft + cellPadding, 
			tableTop + (serie_index + 2) * rowHeight - cellPadding
		)
			.css({
			fontWeight: 'bold',
			color:'#FF0000'
		})       
			.add();
	});
	$.each(chart.xAxis[0].categories, function(category_index, category) {
		cellLeft += colWidth;
		// Apply the cell text
		renderer.text(
			category,
			cellLeft - cellPadding + colWidth, 
			tableTop + rowHeight - cellPadding
		)
			.attr({
			align: 'right'
		})
			.css({
			fontWeight: 'bold'
		})
			.add();
		$.each(series, function(i) {
			renderer.text(
				Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix, 
				cellLeft + colWidth - cellPadding, 
				tableTop + (i + 2) * rowHeight - cellPadding
			)
				.attr({
				align: 'right'
			})
				.add();
		});
	});
};
/**
 * Draw a single line in the table
 */
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
	renderer.path(['M', x1, y1, 'L', x2, y2])
		.attr({
		'stroke': 'silver',
		'stroke-width': 1
	})
		.add();
}
/**
 * Create the chart
 */
window.chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container',
		events: {
			load: Highcharts.drawTable
		},
		borderWidth: 2
	},
	title: {
		text: 'Average monthly temperatures'
	},
	xAxis: {
		categories: ['W30', 'W31', 'W32', 'W33','W34', 'W35']
	},
	yAxis: {
		title: {
			text: 'Temperature (°C)'
		},
		
		labels: {
			format: '{value:,.1f}%',
			style: {
				color: '#666666',
				fontSize: '16px',
				fontFamily: 'Arial',
				fontWeight: '100'
			}
		}
	},
	legend: {
		y: -300
	},
	series: [{
		name: 'CT1',
		color:'#648fe6',
		data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
	}, {
		name: 'CT2',
		color:'#c03232',
		data: [0, 0.8, 5.7, 11.3, 17.0, 22.0]
	}, {
		name: 'E1',
		color:'#71b158',
		data: [1, 0.6, 3.5, 8.4, 13.5, 17.00]
	}, {
		name: 'FD',
		color: '#813ccb',
		data: [1, 0.6, 3.5, 8.4, 13.5, 17.00]
	}, {
		name: 'OFD',
		data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2]
	}]
});

HTML：

<div id="container" style="height: 600px;margin-top:20px;width: 900px"></div>

结果：