jQuery Visualizeのグラフサイズの指定方法(width、heightオプション)

今回はjQuery Visualizeでグラフのサイズを指定する方法を紹介する。jQuery Visualizeにはwidthオプションとheightオプションが用意されており、CSS的に指定することができる。

以下に具体的な方法を記述する。

jQuery Visualizeのグラフサイズの指定方法

jQuery Visualizeの実行部分でwidthとheightを指定できる。実行部分は以下のようになる。他の部分は毎度おなじみなので、分からない方はjQuery Visualizeカテゴリから過去の記事を参考にしていただきたい。結果は以下に貼った画像のようになる。

jQuery Visualizeのグラフサイズの指定

<script type="text/javascript">
$(function(){
  $('table').visualize({type: 'line', width: '800px', height: '600px'});
  $('table').visualize({type: 'line', width: '600px', height: '450px'});
  $('table').visualize({type: 'line', width: '400px', height: '300px'});
  $('table').visualize({type: 'line', width: '200px', height: '150px'});
});   
</script>

jQuery Visualizeのグラフサイズの指定方法(200px:150px)

jQuery Visualizeのグラフサイズの指定方法(400px:300px)

jQuery Visualizeのグラフサイズの指定方法(600px:450px)

jQuery Visualizeのグラフサイズの指定方法(800px:600px)

実際の表示はjQuery Visualize サンプル7(グラフサイズの指定)にて確認できる。

一番上のグラフ(横幅:200px、高さ:150px)のグラフを見れば分かるが、あまり小さいサイズで指定すると表示が崩れる。これに関しては今後カスタマイズの記事を書こうと思うが、実際に利用する際には様々なサイズで表示を確認したほうが良いだろう。

関連記事

jQuery Visualizeのグラフ要素の色の指定方法(colorsオプション)
jQuery Visualizeのテーマの指定方法(Dark・Light)
jQuery Visualizeサンプル集

コメントを残す

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

This blog is kept spam free by WP-SpamFree.

コメントフィード

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