「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>
関連記事
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
- PREV
- titleタグ(wp_title) カスタマイズ
- NEXT
- RSS/Atomフィード カスタマイズ