[Highchartsライブラリ] データ別に異なる形状のグラフを表示する
説明
Highchartsライブラリでデータ別に異なる形状のグラフを表示するにはseries配列の要素でtypeに表示したいグラフの種類を文字列で指定します。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>JavaScriptでグラフを表示する</h1>
<div id="container" style="width:600px;height:480px"></div>
</body>
</html>
【sample.js】
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container"
},
title: {
text: "月間売り上げ"
},
xAxis: {
categories: ["1","2","3","4","5","6","7","8","9","10","11","12"],
title: { text: "月" }
},
yAxis: {
title: { text: "金額" }
},
series: [{
name: "高橋",
type : "spline",
data: [10, 5, 20, 4, 13, 16, 20, 40, 30, 20, 15, 19]
}, {
name: "山田",
type : "column",
data: [20, 22, 24, 19, 26, 30, 33, 28, 30, 28, 24, 20]
}, {
name: "佐藤",
type : "spline",
data: [40, 38, 35, 33, 24, 28, 35, 20, 17, 22, 15, 26]
}]
});
});