グラフを表示するjQueryプラグイン 前編

「jQuery プラグイン」の利用（11）

棒グラフ・下を塗りつぶした折れ線グラフ・円グラフの表示も可能

　jQuery Visualizeプラグインは折れ線グラフだけでなく、棒グラフや下を塗りつぶした折れ線グラフ、さらには円グラフの表示も可能です。

棒グラフの表示方法

　jQuery Visualizeプラグインで棒グラフを表示させた結果を図3に示します。

図3　jQuery Visualizeプラグイン適用後（棒グラフ表示）

　以上のように、棒グラフを表示させるためには、jQuery Visualizeプラグインの設定を行うスクリプト部分を変更する必要があります。棒グラフを表示させるためのjQuery Visualizeプラグイン設定例「plugin」フォルダ内の「bar.js」のスクリプトをリスト4に示します。

リスト4　プラグインの設定ファイル（棒グラフ表示）（bar.js）

<!--プラグインの設定-->
$(document).ready(function(){
    $('table').visualize({
        type:'bar',
        width:'420px',
        height:'300px'
    });
});

　リスト2とほぼ同じですが、オプション設定部分で「type」の設定値が「'line'」ではなく「'bar'」になっています。「'line'」は折れ線グラフ、「'bar'」は棒グラフを意味します。

　あとはHTMLファイルで読み込ませるファイル名をリスト5のように変えれば、棒グラフが表示されます。

リスト5　（棒グラフ表示・黒基調背景）（jQvisualize_bar.htmlの一部）

<script type="text/javascript">
enhance({
    loadScripts: [
        {src: './plugins/excanvas.js', iecondition: 'all'},
        './Scripts/jquery-1.7.2.min.js',
        './plugins/visualize.jQuery.js',
        './plugins/bar.js'
    ],
    loadStyles: [
        './css/visualize.css',
        './css/visualize-dark.css'
    ]
});   
</script>

下を塗りつぶした折れ線グラフの表示方法

　下を塗りつぶした折れ線グラフを表示させたjQuery Visualizeプラグイン適用後を図4に示します。

図4　jQuery Visualizeプラグイン適用後（下を塗りつぶした折れ線グラフ表示）

　下を塗りつぶした折れ線グラフを表示させるためには、リスト4では「'bar'」に設定した「type」の設定値を「'area'」に設定します（サンプルデータ「plugin」フォルダ内の「area.js」）。その部分以外はリスト4と同じなのでスクリプトは省略します。また、サンプルに格納されている「jQvisualize_area.html」は「plugin」フォルダ内の「area.js」を読み込む設定になっています。その部分以外はリスト5と同じなのでスクリプトは省略します。

円グラフの表示方法

　円グラフを表示させたjQuery Visualizeプラグイン適用後を図5に示します。

図5　jQuery Visualizeプラグイン適用後（円グラフ表示）

　円グラフを表示させるためには、リスト4では「'bar'」に設定した「type」の設定値を「'pie'」にします（サンプルデータ「plugin」フォルダ内の「pie.js」）。その部分以外はリスト4と同じなのでスクリプトは省略します。また、サンプルに格納されている「jQvisualize_pie.html」は「plugin」フォルダ内の「par.js」を読み込む設定になっています。その部分以外はリスト5と同じなのでスクリプトは省略します。