感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

2種類のチャートを表示する

スポンサーリンク

highchartsを使って、ブラウザに2種類のチャートグラフを一緒に表示してみましょう。
同じようなデータを、2つのグラフを使って比較したいときもあるはず。

イメージとしては、こんな感じですね。
f:id:sho322:20140513074016j:plain

そんなときは、以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>highchartsのサンプル</title>

<style type="text/css">
#container {
	width: 800px;
	height: 500px;
	border: 1px solid #000;
	padding: 20px;
	margin: 10px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-more.src.js"></script>
<script>
$(document).ready(function() {
	var options;
    options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: '2つのチャートをうまい具合に比較する'
        },
        series: [{
            name: 'バーグラフ1',
            data: [2,1,5,4]
        }, {
            name: 'バーグラフ2',
            data: [5,7,9,11]
        }, {//新しいチャートを書き加える
            type: 'pie',
            data: [2,4,6,8],
            center: [500,5], //どこにパイグラフを配置するか
            dataLabels: {
                enabled: true
            }
        }]
    };
	var chart = $('#container').highcharts(options).highcharts();
    

});
</script>

</head>
<body>

<div id='container'></div>

</body>
</html>

highchartsはグラフを描くjQuery pluginでもおそらく最も有名なものです。
こいつをうまく使えば、様々な統計データを綺麗に表示することができるはず!