shigemk2/like-a-cohort.html

## like-a-cohort.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <div id="container" style="width: 60%; 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: 'area', //グラフのタイプline, spline, area, areaspline, column, bar, pie,scatter
                margin: [50, 150, 60, 80], //余白
                width: 780, // width
            },
            title: {
                text: '総ユーザー数', //グラフタイトル
                style: {margin: '10px 100px 0 0' } // 余白
            },
            xAxis: { //X軸
                categories: ['1月', '2月', '3月', '4月', '5月'], //ラベル
                title: {text: '月'} //タイトル
            },
            yAxis: { //Y軸
                title: {text: 'percentage'}, //タイトル
                plotLines: [{ //ラインのスタイル
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                        Highcharts.numberFormat(this.y, 0, ',') +' millions)';
                }
            },
            legend: { //項目名
                layout: 'vertical',
                style: {
                    left: 'auto',
                    bottom: 'auto',
                    right: '-20px',
                    top: '100px',
                    width: '5px'
                }
            },
            plotOptions: {
                area: {
                    stacking: 'percent',
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            },
            series: [ //ここからグラフ内容指定
                {
                    name: '会員登録だけした人',
                    data: [3000, 2000, 2555, 4000, 5000]
                }, {
                    name: '新しく有料プランを購入した人',
                    data: [500, 400, 500, 500, 999]
                }, {
                    name: '有料プランをやめた人',
                    data: [5000, 4500, 4000, 6000, 700]
                }]
        });
    });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>hoge</title>
	</head>
	<body>
	<div id="container" style="width: 60%; 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: 'area', //グラフのタイプline, spline, area, areaspline, column, bar, pie,scatter
	margin: [50, 150, 60, 80], //余白
	width: 780, // width
	},
	title: {
	text: '総ユーザー数', //グラフタイトル
	style: {margin: '10px 100px 0 0' } // 余白
	},
	xAxis: { //X軸
	categories: ['1月', '2月', '3月', '4月', '5月'], //ラベル
	title: {text: '月'} //タイトル
	},
	yAxis: { //Y軸
	title: {text: 'percentage'}, //タイトル
	plotLines: [{ //ラインのスタイル
	value: 0,
	width: 1,
	color: '#808080'
	}]
	},
	tooltip: {
	formatter: function() {
	return ''+
	this.x +': '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
	Highcharts.numberFormat(this.y, 0, ',') +' millions)';
	}
	},
	legend: { //項目名
	layout: 'vertical',
	style: {
	left: 'auto',
	bottom: 'auto',
	right: '-20px',
	top: '100px',
	width: '5px'
	}
	},
	plotOptions: {
	area: {
	stacking: 'percent',
	lineColor: '#ffffff',
	lineWidth: 1,
	marker: {
	lineWidth: 1,
	lineColor: '#ffffff'
	}
	}
	},
	series: [ //ここからグラフ内容指定
	{
	name: '会員登録だけした人',
	data: [3000, 2000, 2555, 4000, 5000]
	}, {
	name: '新しく有料プランを購入した人',
	data: [500, 400, 500, 500, 999]
	}, {
	name: '有料プランをやめた人',
	data: [5000, 4500, 4000, 6000, 700]
	}]
	});
	});
	</script>
	</body>
	</html>