読者です 読者をやめる 読者になる 読者になる

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

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

highchartsをダウンロードして簡単なサンプルを作ってみる

highcharts
<スポンサーリンク>

highchartsはブラウザ上でチャートを表現することができるjQueryのプラグインです。
以下のURLからダウンロードすることができます。
http://www.highcharts.com/download/

highchartsを使えば、株価などもけっこう簡単に表示できたりして、とても便利です。
ここでは簡単なサンプルから見ていってhighchartsを勉強していきたいと思います。

ただ、ちょっと問題があって、公式サイトからhighchartsをダウンロードして、Lhaplusで解凍した場合、

「正常に解凍できません。CRC が一致しないか、出力先ファイルが使用中です。」

と表示されて、highchartsが全く使えません(空のファイルになってしまう)

なので、Lhaplusを使わずに、Rubyを使って解凍しました。

解凍サンプルは以下の記事を参考にさせていただきました。
ありがとうございます。

「zipを展開するサンプル」
http://d.hatena.ne.jp/unageanu/20090912/1252747303

気を取り直して、超基本的なサンプルを作ってみます。

<!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: 'とりあえずチャートを作ってみよう!'
        },
        series: [{
            name: 'バー',
            data: [1,2,3,4]
        }]
    };
	$('#example').highcharts(options);
});
</script>

</head>
<body>

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

</body>
</html>

こんな感じでjQueryとhighchartsをscriptタグで読み込んで、適当な引数を渡すと・・・

f:id:sho322:20140511160341j:plain

このように綺麗なグラフが表示されます。
これは便利ですよね。ブラウザで色んなデータを表現できそう!