スキップしてメイン コンテンツに移動

jQueryのプラグインjqPlotでグラフを描画してみる

環境を作る

WS000333グラフ描画に特化したjqPlotというjQueryプラグインで遊んでみたいと思います。まずは、環境作りから。プラグインは以下から入手できます。

・cleonello / jqplot / downloads — Bitbucket
https://bitbucket.org/cleonello/jqplot/downloads/

現時点で最新版と思しき、

  • jquery.jqplot.1.0.0b2_r1012.zip

をダウンロードして解凍します。

WS000332

distディレクトリ内にたくさんファイルが入ってますが、この中で今回使うのは以下のファイルです。

  • jquery.jqplot.min.css
  • excanvas.min.js
  • jquery.jqplot.min.js
  • jquery.min.js
  • pluginsディレクトリ

 

簡単なグラフを表示させてみる

適当にHTMLファイルを作成して、先ほどのファイルから必要なスタイルシートとJavaScriptを読み込ませます。以下の３ファイルです。

<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>


次に<body>タグ内にグラフを表示させるスペースを<div>タグで設置してやります。



<div id="graf" style="width:600px;height:300px"></div>


JavaScriptの配列を使ってグラフを描画します。



$(document).ready(function() {
    var s1 = [ 5, 7, 6, 8, 7 ];
    var s2 = [ 7, 5, 7, 6, 9 ];
    $.jqplot('graf', [ s1, s2 ]);
});


すごくシンプル。。



上記のようなJavaScriptの場合、配列に格納されてる値はy値で、格納した順番とx値が対応しています。



 



Demo page



 



サンプルブログラム



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>hellojqPlot</title>
		<meta name="author" content="takaiwa.net" />
		<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
		<script type="text/javascript" src="./lib/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
	</head>
	<script type="text/javascript">
	$(document).ready(function() {
	    var s1 = [ 5, 7, 6, 8, 7 ];
	    var s2 = [ 7, 5, 7, 6, 9 ];
	    $.jqplot('graf', [ s1, s2 ]);
	});
	</script>
	<body>
		<div id="graf" style="width:600px;height:300px"></div>
		
	</body>
</html>
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

Javaでprivateなfieldやmethodにアクセスする

JUnitでテストしてると、privateなフィールドにアクセスして、値を参照したりセットしたりしたくなるわけですが、よく使うのでメモしておきます。 例えば、次のような対象のクラスがあるとします。 public class ParentClass { private String hoge = "ParentClass!!"; public void dispMsg() { System.out.println("dispMsg:" + hoge); } private void privateDispMsg(String msg) { System.out.println("dispMsg:" + msg); } }
コメントを投稿
続きを読む

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ
コメントを投稿
続きを読む

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。
コメントを投稿
続きを読む