Highcharts Demo

author(s): Wojciech Chmiel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container"></div>

CSS

#container {
    width: 500px;
    height: 300px;
}

JavaScript

var chart = Highcharts.chart('container',{
	title: {
		text: '柱狀圖'
	},
	xAxis: {
		categories: ['蘋果', '橘子', '芒果', '葡萄', '香蕉']
	},
	yAxis: {
		title:{text:'數量'},
		plotLines: [{
			color: 'red',
			value: '2', // Insert your average here
			width: '1',
			zIndex: 2 // To not get stuck below the regular plot lines
		},{
			color: 'blue',
			value: '3', // Insert your average here
			width: '1',
			zIndex: 2 // To not get stuck below the regular plot lines
		}]
	},
	series: [{
		name: '小張',
		type: 'column',
		data: [5, 3, 4, 7, 2]
	}, {
		name: '小彭',
		type: 'column',
		data: [2, -2, -3, 2, 1]
	}, {
		name: '小潘',
		type: 'column',
		data: [3, 4, 4, -2, 5]
	}]
});