ソースコード
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Highcharts example 01</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
},
title: {
text: '月平均気温',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: '気温 (℃)'
},
plotLines: [
{
value: 0,
width: 2,
color: 'red'
}
]
},
series: [
{
name: 'Tokyo',
data: [5.1,7.0,8.1,14.5,18.5,22.8,27.3,27.5,25.1,19.5,14.9,7.5],
},
{
name: 'Osaka',
data: [4.4,7.4,8.1,13.8,19.6,24.2,27.8,28.9,25.2,19.5,15.2,8.1]
},
{
name: 'Sapporo',
data: [-3.8,-1.1,0.7,6.9,11.1,17.3,21.8,26.6,19.2,12.1,6,-2]
},
{
name: 'Naha',
data: [14.9,17.6,17.1,20.4,23.9,27.9,28.9,28.3,27.9,25.2,23.7,18.6],
}
]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
出力結果sample01 (fc2 に置いてあるテストページに飛びます)
0 件のコメント:
コメントを投稿