highchartsでコホートグラフのようなものを作ってみました
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment