Skip to content

Instantly share code, notes, and snippets.

@fddcddhdd

fddcddhdd/stock_graph.html

Created August 31, 2015 08:45
Show Gist options
  • Save fddcddhdd/64636cbabb6cb32754b7 to your computer and use it in GitHub Desktop.
Save fddcddhdd/64636cbabb6cb32754b7 to your computer and use it in GitHub Desktop.
Download ZIP
JSだけで動的グラフを生成してみた(c3.jsというライブラリを使用、値は2013-2015の日経平均株価)
Raw
stock_graph.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>c3.jsのテスト</title>
<!-- グラフのライブラリをインポート -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- https://github.com/masayuki0812/c3 からダウンロードする -->
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [ // 株価(始値)
['2013',11138.66,11559.36,12397.91,13860.86,13774.54,13677.32,13668.32,13388.86,14455.8,14327.94,15661.87,16291.31],
['2014',14914.53,14841.07,14827.83,14304.11,14632.38,15162.1,15620.77,15424.59,16173.52,16413.76,17459.85,17450.77],
['2015',17674.39,18797.94,19206.99,19520.01,20563.15,20235.73,20585.24,18890.48]
],
type: 'line' // bar, line,
},
axis: {
x: {
tick: {
format: function(d){ // x軸の名称を数値から文字列に変換
return d + 1 + "月";
}
}
},
y: {
tick: {
format: function(d){ // y軸の名称を数値から文字列に変換
return String(d).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + "円";
}
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment