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

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

ブラウザ上で2つのデータを比較するグラフを描く

<スポンサーリンク>

jQueryのプラグインで、ブラウザ上で素敵なチャート(グラフ)を描くことができるのがhighchartsです。
今日は、2つの値を比較するようなグラフをhighchartsを使って描いてみます。

例としては、こんな感じですね。

f:id:sho322:20140511183729j:plain

こんな画像を出すためのコードは以下のように書きます。

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

<style type="text/css">
#container {
	width: 300px;
	height: 300px;
	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:[4,6,2,9]
        }
        ]
    };
	$('#example').highcharts(options);
});
</script>

</head>
<body>

<div id='example'></div>

</body>
</html>

これをWebサーバを通して見れば、上の画像みたいな結果になります。

また、JavaScriptを以下のように変更しても全く同じ結果になります。
addSeriesメソッドの引数にseriesオブジェクトを渡すことで、もうひとつのチャートを付け足すことができるというわけです。

<script>
$(document).ready(function() {
	var options;
    options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: '2つのチャートをうまい具合に比較する'
        },
        series: [{
            name: 'バーグラフ1',
            data: [2,1,5,4]
        }]
    };
	var chart = $('#example').highcharts(options).highcharts();
    
    chart.addSeries({
            name:'バーグラフ2',
            data:[4,6,2,9]
    });
});
</script>