highchartsで棒グラフを作ってみました
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<title>hoge</title> | |
</head> | |
<body> | |
<div id="container" style="width: 50%; height: 400px"></div> | |
<script type='text/javascript' src='./js/jquery-1.4.4.min.js'></script> | |
<script type="text/javascript" src="./js/highcharts.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
var chart = new Highcharts.Chart({ | |
chart: { | |
renderTo: 'container', //表示するid名 | |
defaultSeriesType: 'column', //グラフのタイプline, spline, area, areaspline, column, bar, pie,scatter | |
margin: [50, 150, 60, 80] //余白 | |
}, | |
title: { | |
text: '総ユーザー数', //グラフタイトル | |
style: {margin: '10px 100px 0 0' } // 余白 | |
}, | |
xAxis: { //X軸 | |
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //ラベル | |
title: {text: '月'} //タイトル | |
}, | |
yAxis: { //Y軸 | |
title: {text: 'ユーザー数'}, //タイトル | |
plotLines: [{ //ラインのスタイル | |
value: 0, | |
width: 1, | |
color: '#808080' | |
}] | |
}, | |
// tooltip: { //ツールチップ | |
// formatter: function() { | |
// return ''+ this.series.name +''+ | |
// this.x +': '+ this.y +'人'; } | |
// }, | |
legend: { //項目名 | |
layout: 'vertical', | |
style: { | |
left: 'auto', | |
bottom: 'auto', | |
right: '10px', | |
top: '100px' | |
} | |
}, | |
series: [ //ここからグラフ内容指定 | |
{ | |
name: 'ユーザー数', | |
data: [1000, 2000, 4000, 3500, 5000, 8000, 10000, 14000, 15500, 16550, 18000, 20000] | |
}] | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment