jQuery Visualizeで様々な種類のグラフを作成

前回の記事（jQuery Visualizeで洗練されたデザインのグラフの作成）でjQuery Visualizeのダウンロードや基本的な使い方を紹介したので、今回は折れ線グラフ（２種類）、円グラフ、そしてデフォルトで設定されている棒グラフの指定方法を記載する。

jQuery Visualizeにおけるグラフ種類の指定方法

jQuery Visualizeにおけるグラフ種類の指定方法を記載するが、方法は非常に簡単。以下のコードはサンプル１の13～17行目を抽出したものである。前回の記事で説明した部分だが、この5行を書くことで棒グラフが生成される。このコードの3行目を変更することでグラフの種類を指定できる。

グラフ生成の実行部分

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize();
        });
</script>

折れ線グラフ（１つめ/２種類）の作成方法

折れ線グラフを作成するには、以下のように指定する。{type: ‘line’}を追加しただけ。

折れ線グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'line'});
        });
</script>

実際にどのように表示されるかはjQuery Visualize サンプル２（折れ線グラフ１）で確認できる。

折れ線グラフ（２つめ/２種類）の作成方法

折れ線グラフは２種類用意されており、こちらは折れ線の下部に色が塗られたもの。これを作成するには、以下のように指定する。

折れ線グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'area'});
        });
</script>

実際の表示はjQuery Visualize サンプル３（折れ線グラフ２）で確認できる。

円グラフの作成方法

円グラフを作成するには、以下のように指定する。

円グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'pie'});
        });
</script>

実際の表示はjQuery Visualize サンプル４（円グラフ）で確認できる。

棒グラフの作成方法

棒グラフはデフォルトの設定となっているため敢えて指定する必要はないのだが、指定するには以下のようにする。

棒グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'bar'});
        });
</script>

実際の表示はjQuery Visualize サンプル５（棒グラフ）で確認できる。

以上のように様々なグラフを簡単に指定することができる。次回はより細かい指定をしていこうと思う。

関連記事

jQuery Visualizeで洗練されたデザインのグラフの作成
jQuery Visualizeのテーマの指定方法
jQuery Visualizeサンプル集