事前準備
http://www.jqplot.com/にアクセスし、jquery.jqplot.1.0.4r1121.zipをダウンロードします。解凍すると次のファイルやフォルダがあるので、適当な箇所に配置します。
・jquery.jqplot.min.js
・jquery.jqplot.min.css
・pluginsフォルダ
ソースコード
jquery.jqplot.min.jsとjquery.jqplot.min.cssをインポートしてグラフを描画します。（pluginsフォルダ配下のライブラリは必要なときに利用）。PhoneGapではデバイス準備が完了した後に描画処理を行います。グラフは$.jqplotに要素id、データ、オプションを指定することで描画されます。
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// イベントリスナの登録。デバイスの準備完了まで待つ。
document.addEventListener("deviceready", onDeviceReady, false);
// デバイス準備完了時にコールバック。
function onDeviceReady() {
var graphData = [
[1,3,2,5,4,7,6,9,8],
[1,2,4,6,9,6,4,2,1]
];
var options = {
title : '折れ線グラフ'
};
// グラフ描画
var plot = $.jqplot('chart', graphData, options);
}
</script>
<title>Hello World!</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content" id="main">
<div id="chart"></div>
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
</body>
</html>
実行すると上手のような折れ線グラフが描画されました。
0 件のコメント:
コメントを投稿