jQuery Visualizeのテーマの指定方法(Dark・Light)

jQuery Visualizeカテゴリの前回の記事(jQuery Visualizeで様々な種類のグラフを作成)では、棒グラフ、折れ線グラフ(2種類)、円グラフの指定方法を紹介した。この記事ではjQuery Visualizeのテーマの指定方法を紹介する。

jQuery VisualizeのDarkテーマの指定方法

jQuery Visualizeは2つのテーマを指定することができる。1つは前回までの記事で何も言わずに用いていたDarkテーマである。これはvisualize-dark.cssを読み込むことで使用することができる。以下のコードの8行目で指定している。

Darkテーマの指定方法

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>jQuery Visualize サンプル2(折れ線グラフ1)</title>
    <link href="css/basic.css" type="text/css" rel="stylesheet" />
    <link href="css/visualize.css" type="text/css" rel="stylesheet" />
    <link href="css/visualize-dark.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
    <script type="text/javascript" src="js/excanvas.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/visualize.jQuery.js"></script>
    <script type="text/javascript">
    jQuery(function(){
        jQuery('table').visualize({type: 'line'});
    });
    </script>
</head>

jQuery VisualizeのLightテーマの指定方法

もう1つのテーマとしてLightテーマがある。lightテーマの指定はvisualize-light.cssを読み込めばよい。先ほどと同じく8行目で指定している。

また、今回は1つのページに全ての種類(棒グラフ、折れ線グラフ(2種類)、円グラフ)のグラフを表示してみる。以下のコードの14~19行目で実行している。

プログラムの中身は詳しく知らないが、jQuery Visualizeでは、同じテーブルをもとにグラフを書く際には実行の呼び出しの順序とは逆の順番でグラフが描画されるようだ。このため、一番最後に記述した折れ線グラフ({type: ‘line’})が一番上に表示される。

Lightテーマの指定方法

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>jQuery Visualize サンプル6(テーマの指定)</title>
    <link href="css/basic.css" type="text/css" rel="stylesheet" />
    <link href="css/visualize.css" type="text/css" rel="stylesheet" />
    <link href="css/visualize-light.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
    <script type="text/javascript" src="js/excanvas.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/visualize.jQuery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('table').visualize({type: 'pie'});
        $('table').visualize({type: 'bar'});
        $('table').visualize({type: 'area'});
        $('table').visualize({type: 'line'});
    });
    </script>
</head>

jQuery VisualizeのLightテーマの折れ線グラフ1

jQuery VisualizeのLightテーマの折れ線グラフ2

jQuery VisualizeのLightテーマの棒グラフ

jQuery VisualizeのLightテーマの円グラフ

実際の表示はjQuery Visualize サンプル6(テーマの変更)にて確認できる。

関連記事

jQuery Visualizeで洗練されたデザインのグラフの作成
jQuery Visualizeで様々な種類のグラフを作成
jQuery Visualizeサンプル集

コメント

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery_visualize/1454/trackback/