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