「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>
  • このエントリーをはてなブックマークに追加

関連記事

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑