「jqPlot」 カスタマイズ

n__998

以前、ここで使用した「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>
  • このエントリーをはてなブックマークに追加

関連記事

n__998

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

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

no image

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

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

n__1113

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

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

1049

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

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

n__1105

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

n__1087

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

n__1056

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

1074

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

n__813

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

1065

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

Comment

Message

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


*

PAGE TOP ↑