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

関連記事

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

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

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

no image

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

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

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

no image

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

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

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

Comment

@jquerycomnet にコメントする コメントをキャンセル

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

*

PAGE TOP ↑