「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。

以下4つのファイルへリンクしている前提です。

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

各種グラフ作成方法は以下にあります。
折れ線グラフ | 円グラフ | 棒グラフ | ローソク足チャート
各種オプション
凡例

目次

  1. レスポンシブ化
  2. 一画面に複数のグラフを表示
  3. グラフに複数系列を表示
  4. ラベル数値に桁区切りを入れる
  5. Y軸ラベルを回転させて縦に表示
  6. x軸 目盛値を傾ける
  7. グラフプロットに値をツールチップで表示
  8. グラフ背景色を変更
  9. 複数Y軸

1. レスポンシブ化

replotを使用すると実現できるようですが、初期のサイズが指定できないようです。(さらに調査) サンプル(ブラウザちっちゃくしてみてください)

<div id="chart1"></div>

<script type="text/javascript">
$(document).ready(function(){
    data = [ 34,78,90,12,45,67,89,23,56 ]
    plot1 = $.jqplot( 'chart1', [data]);
    window.onresize = function( event) {
        plot1.replot();
    }
});
</script>

2. 一画面に複数のグラフを表示

複数記述すればよさそうです。サンプル

<div id="chart2-1"></div>
<div id="chart2-2"></div>

<script type="text/javascript">
$(document).ready(function(){
    data2_1 = [34,78,90,12,45,67,89,23,56]
    data2_2 = [93,72,14,45,66,87,28,31,59]
    $.jqplot( 'chart2-1', [data2_1]);
    $.jqplot( 'chart2-2', [data2_2]);
});
</script>

3. グラフに複数系列を表示

それぞれデータを用意し、同様に[]内に記述します。 サンプル

<div id="chart3"></div>

<script type="text/javascript">
$(document).ready(function(){
    data3_1 = [34,78,90,12,45,67,89,23,56]
    data3_2 = [93,72,14,45,66,87,28,31,59]
    $.jqplot( 'chart3', [data3_1,data3_2]);
});
</script>

4. ティック(目盛り)数値に桁区切りを入れる

tickOptions: { formatString: "%'f" }

もしくは

tickOptions: { formatString: "%'d" }

を入れると3桁ごとにカンマが挿入されます。 サンプル

<div id="chart4"></div>

<script type="text/javascript">
$(document).ready(function(){
    data4 = [34000,78000,90000,12000,45000,67000,89000,23000,56000]
    $option = {
        axes:{
            yaxis:{
                tickOptions: { formatString: "%'d" }
            }
        },
    }
    $.jqplot( 'chart4', [data4], $option);
});
</script>

5. Y軸ラベルを回転させて縦に表示

jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js

を追加で読み込んで、
yaxisへ

labelRenderer: $.jqplot.CanvasAxisLabelRenderer

を設定すると縦に表示してくれます。 サンプル

// プラグイン
<script src="/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript">
<script src="/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript">
<div id="chart5"></div>

<script type="text/javascript">
$(document).ready(function(){
    data5 = [34,78,90,120,45,67,89,23,56]
    $option = {
        axes:{
            yaxis:{
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                label:'回転させたラベル'
            }
        },
    }
    $.jqplot( 'chart5', [data5], $option);
});
</script>

6. x軸 目盛値を傾ける

jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js

を読み込んで、tickOptionsangleで傾ける角度を設定します。angleは時計回りに回転度を設定。 サンプル

// プラグイン
<script src="/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript">
<script src="/plugins/jqplot.canvasAxisTickRenderer.min.js" type="text/javascript">
<div id="chart6"></div>

<script type="text/javascript">
$(document).ready(function(){
    data6 = [34000,78000,90000,12000,45000,67000,89000,23000,56000]
    $option = {
        axes:{
            xaxis:{
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: { angle: -30 }
            }
        },
    }
    $.jqplot( 'chart6', [data6], $option);
});
</script>

7. グラフプロットに値をツールチップで表示

jqplot.highlighter.min.js

を読み込んで、highlighterオプションを追加します。これで、グラフ内のプロットにマウスオーバーすると値が表示されます。サンプル 円グラフでの方法

ツールチップのスタイルは、jquery.jqplot.cssに書かれています。
(=>.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip)

// プラグイン
<script src="/plugins/jqplot.highlighter.min.js" type="text/javascript">
<div id="chart7"></div>

<script type="text/javascript">
$(document).ready(function(){
    data7_1 = [34,78,90,12,45,67,89,23,56]
    data7_2 = [93,72,14,45,66,87,28,31,59]
    $option = {
        highlighter: {
            show: true,
        },
    }
    $.jqplot( 'chart7', [data7_1,data7_2], $option);
});
</script>

8. グラフ背景色を変更

gridbackgroundで色を指定します。サンプル

<div id="chart8"></div>

<script type="text/javascript">
$(document).ready(function(){
    data8 = [34,78,90,12,45,67,89,23,56]
    $option = {
        grid: {
            background: '#aaaaaa'
        },
    }
    $.jqplot( 'chart8', [data8], $option);
});
</script>

9. 複数Y軸

axesにY軸を複数定義して、series内でyaxisをそれぞれ設定します。サンプル

<div id="chart10"></div>

<script type="text/javascript">
$(document).ready(function(){
    data10_1 = [11138.66,11559.36,12397.91]
    data10_2 = [13860.58,14054.49,14578.54]

    $option = {
        legend: { show:true},
        title: '日経平均とダウ平均の相関',
        series:[
            { label: '日経平均', yaxis: 'yaxis'},
            { label: 'ダウ平均', yaxis: 'y2axis'},
        ],
        axes:{
            xaxis:{
                label: '2013年',
            },
            yaxis:{
                label: '日経平均',
                autoscale: true,
                tickOptions: {formatString:'%d'},
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            },
            y2axis:{
                label: 'ダウ平均',
                autoscale: true,
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            },
        }
    }
    $.jqplot( 'chart10', [data10_1,data10_2], $option);
});
</script>
  • このエントリーをはてなブックマークに追加

関連記事

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

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

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

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

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

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

Comment

Message

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

*

PAGE TOP ↑