「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。
スクリプト
jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
<script src="jquery.min.js" type="text/javascript"></script> <link href= "jquery.jqplot.min.css" type="text/css" rel="stylesheet"> <script src="jquery.jqplot.min.js" type="text/javascript"></script> <script src="excanvas.min.js" type="text/javascript"></script>
<!-- 棒グラフを生成するためのプラグイン --> <script src="/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script> <!-- 棒グラフのそれぞれの値をカテゴリーするためのプラグイン --> <script src="/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
HTML
<div id="div1093"></div>
表示用データ
<script type="text/javascript">
$(document).ready(function(){
// カテゴリーの値を指定する (カテゴリー:表示データの区切り)
var ticks = [ 'Jan', 'Feb', 'Mar', 'April'];
// シリーズのラベルを指定 (シリーズ:1つのカテゴリーに表示させるデータ)
series = [ {label: '東京'}, {label: '日本(東京以外)'}, {label: '国外'}];
// 表示データ (シリーズごとのデータ)
var s1 = [ 47.3, 45.8, 45.5, 43.4];
var s2 = [ 50.7, 51.8, 52.2, 55.0];
var s3 = [ 2.0, 2.4, 2.3, 1.6];
// シリーズの配色をシリーズの配列と同順に各々指定
seriescolors = [ "#4472A6", "#AA4644", "#89A550"];
コードはまだ終了してません。ここから下は、縦棒・横棒どちらか選んで下さい。
縦棒グラフのオプション
// オプション
options = {
title: '地域別アクセス割合', // タイトル
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer, // グラフの種類を「棒グラフ」に
},
seriesColors: seriescolors, // 棒グラフカラーリング
series: series, //
legend: { show: true, placement: 'outsideGrid' }, // 凡例
// 軸の設定
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer, // カテゴリー
ticks: ticks // 横軸データ
},
yaxis: {}
}
}
// グラフ作成実行 (グラフ表示する#div, 表示データ, オプションの順に指定)
$.jqplot( 'div1093', [s1, s2, s3], options);
});
</script>
横棒グラフのオプション
横棒グラフに切り替えるのは、rendererOptionsにbarDirection: 'horizontal'を設定し、xaxisに設定していたものをyaxisに移動します。
棒グラフ 横 サンプル (課題、太くする..)
// オプション
options = {
title: '地域別アクセス割合', // タイトル
seriesDefaults: {
renderer: jQuery.jqplot.BarRenderer, // グラフの種類を「棒グラフ」に
rendererOptions: {
barDirection: 'horizontal' // 横棒グラフに切替
}
},
seriesColors: seriescolors, // 棒グラフカラーリング
series: series, //
legend: { show: true, placement: 'outsideGrid' }, // 凡例
// 軸の設定
axes: {
xaxis: {},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer, // カテゴリー
ticks: ticks // 縦軸データ
}
}
}
// グラフ作成実行 (グラフ表示する#div, 表示データ, オプションの順に指定)
$.jqplot( 'div1093', [s1, s2, s3], options);
});
</script>
関連記事
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
- PREV
- titleタグ(wp_title) カスタマイズ
- NEXT
- RSS/Atomフィード カスタマイズ




