「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プラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

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

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

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

no image

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

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

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

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

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

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

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

no image

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

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

Comment

Message

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

*

PAGE TOP ↑