jQuery Visualizeのテーマの指定方法（Dark・Light）
jQuery Visualizeカテゴリの前回の記事（jQuery Visualizeで様々な種類のグラフを作成）では、棒グラフ、折れ線グラフ（２種類）、円グラフの指定方法を紹介した。この記事ではjQuery Visualizeのテーマの指定方法を紹介する。
jQuery VisualizeのDarkテーマの指定方法
jQuery Visualizeは２つのテーマを指定することができる。１つは前回までの記事で何も言わずに用いていた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 サンプル２（折れ線グラフ１）</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テーマの指定方法
もう１つのテーマとしてLightテーマがある。lightテーマの指定はvisualize-light.cssを読み込めばよい。先ほどと同じく8行目で指定している。
また、今回は１つのページに全ての種類（棒グラフ、折れ線グラフ（２種類）、円グラフ）のグラフを表示してみる。以下のコードの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 サンプル６（テーマの指定）</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 サンプル６（テーマの変更）にて確認できる。
関連記事
jQuery Visualizeで洗練されたデザインのグラフの作成
jQuery Visualizeで様々な種類のグラフを作成
jQuery Visualizeサンプル集
2012年9月14日 10:50 AM｜カテゴリー：jQuery Visualize｜コメント (4)
コメント
我打完瘦脸针恢复了
北京整形机构哪里好 http://wfsh.org/
2015年12月31日 11:01 AM｜ 北京整形机构哪里好
their similar to Concern is along with LG By notice RD400, a week backside by mistake a number of records or state several technique data or maybe motorists state removed at this point when we wordpress tool LAN cable notebook do not recognise the item. You should advise like any drivers need to be installed or what exactly??
2015年10月16日 9:14 AM｜ pochette
What a fairly special up-date Jesse. Visiting printer this out there and also remain about the Power by means of Seek office walls.
2015年9月30日 6:56 PM｜ 2015 nouveau longchamp sac à dos brodé brown
そこにちょっと簡単に素早く率い、あなたが数を知らせる|正しくロードされていない画像を写真はちょうどあなたに与えたいと思った。私はよく分からない理由が、私はそのリンクの問題だと思います。 私は2つの異なるでそれを試してみたし、両方が同じ結果。
2015年9月22日 4:18 PM｜ ペンタックス　交æ›ç”¨ãƒ¬ãƒ³ã‚ºã€€ãƒšãƒ³ã‚¿ãƒƒã‚¯ã‚¹ï¼«ãƒžã‚¦ãƒ³ãƒˆã€€DA40mmF2.8 ZS
コメントフィード
トラックバックURL： http://monopocket.jp/blog/jquery_visualize/1454/trackback/