「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. レスポンシブ化

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

を読み込んで、tickOptionsのangleで傾ける角度を設定します。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. グラフ背景色を変更

gridのbackgroundで色を指定します。サンプル

<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>