<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#graph {
width : 400px;
height: 300px;
margin: 20px auto;
}
.graph-title {
font-size:16px;
font-weight:bold;
text-align:center;
margin:50px 0 0;
}
</style>
<script type="text/javascript" src="flotr2.min.js"></script>
</head>
<body>
<p class="graph-title">折れ線グラフサンプル</p>
<div id="graph"></div>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById("graph");
var data1 = {
data: [],
label: "2012年"
};
data1.data.push([1, 70]);
data1.data.push([2, 68]);
data1.data.push([3, 65]);
data1.data.push([4, 67]);
data1.data.push([5, 64]);
data1.data.push([6, 61]);
data1.data.push([7, 60]);
data1.data.push([8, 62]);
data1.data.push([9, 68]);
data1.data.push([10, 67]);
data1.data.push([11, 70]);
data1.data.push([12, 72]);
var data2 = {
data: [],
label: "2012年"
};
data2.data.push([1, 70]);
data2.data.push([2, 69]);
data2.data.push([3, 70]);
data2.data.push([4, 71]);
data2.data.push([5, 69]);
data2.data.push([6, 70]);
data2.data.push([7, 69]);
data2.data.push([8, 68]);
data2.data.push([9, 69]);
data2.data.push([10, 70]);
data2.data.push([11, 73]);
data2.data.push([12, 75]);
// ラベルを表示する関数
function labelFn(label) {
return label;
}
// グラフを描画
graph = Flotr.draw(container,
[ data1, data2 ], {
// X軸の描画
xaxis: {
// 横軸の項目ラベル
tickFormatter: function (x) {
var
x = parseInt(x),
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return months[(x-1)%12];
}
},
// 凡例
legend: {
position: "nw",
labelFormatter: labelFn,
backgroundColor: "#D2E8FF"
},
// HTML形式で文言を出力
HtmlText: true
});
}
</script>
</body>
</html>
